Code Monkey home page Code Monkey logo

tui.calendar's Introduction

TOAST UI Calendar

πŸžπŸ“… A JavaScript calendar that is full featured. Now your service just got the customizable calendar.

npm GitHub license PRs welcome code with hearth by NHN Cloud

🚩 Table of Contents

πŸ“¦ Packages

The functionality of TOAST UI Calendar is available when using the Plain JavaScript, React, Vue Component.

πŸ“™ Documents

Collect statistics on the use of open source

TOAST UI Calendar applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Calendar is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > β€œui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage.

To disable GA, refer to the docs below.

πŸ“… Features

✨ Monthly, Weekly, Daily and Various View Types

Monthly Weekly
image image
Daily 2 Weeks
image image

Easy to Use: Dragging and Resizing a Schedule

Dragging Resizing
image image

Ready to Use: Default Popups

Creation Popup Detail Popup
image image

🎨 Other Features

  • Supports various view types: daily, weekly, monthly(6 weeks, 2 weeks, 3 weeks)
  • Supports efficient management of milestone and task schedules
  • Supports the narrow width of weekend
  • Supports changing start day of week
  • Supports customizing the date and schedule information UI(including a header and a footer of grid cell)
  • Supports adjusting a schedule by mouse dragging
  • Supports customizing UI by theme

πŸ’¬ Contributing

🌏 Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Latest 11+ Latest Latest Latest

πŸ”© Dependencies

🍞 TOAST UI Family

πŸš€ Used By

πŸ“œ License

This software is licensed under the MIT Β© NHN Cloud.

tui.calendar's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

tui.calendar's Issues

A schedule isn't shown at specific day

Version

v0.6.6
v0.8.0 too.

Development Environment

Mac, High Sierra
Chrome . :65.0.3325.162

Current Behavior

Some schedule is not shown under specific condition in monthly view
That schedule is on 2018.03.09 in sample code.

image

var cal = new Calendar(xxxxx, {
    ....
    month: {
        visibleScheduleCount: 3
    },
    ....
});

cal.setCalendarColor('SCHEDULE', {
    color: '#6d6d6d',
    bgColor: '#fef1f1',
    render: false
});
cal.setCalendarColor('IAMSCHOOL', {
    color: '#6d6d6d',
    bgColor: '#ebf2ff',
    render: false
});

cal.createSchedules([
    {
        id: '10',
        calendarId: 'SCHEDULE',
        title: '1',
        category: 'time',
        dueDateClass: '',
        start: '2018-03-09T09:00:00+09:00',
        end: '2018-03-09T10:00:00+09:00',
        isReadOnly: true
    },
    {
        id: '1',
        calendarId: 'IAMSCHOOL',
        title: '2',
        category: 'allday',
        dueDateClass: '',
        start: '2018-03-06T09:00:00+09:00',
        end: '2018-03-08T09:00:00+09:00',
        isReadOnly: true
    },
    {
        id: '2',
        calendarId: 'IAMSCHOOL',
        title: '3',
        category: 'allday',
        dueDateClass: '',
        start: '2018-03-07T09:00:00+09:00',
        end: '2018-03-09T09:00:00+09:00',
        isReadOnly: true
    },
    {
        id: '3',
        calendarId: 'SCHEDULE',
        title: '4',
        category: 'allday',
        dueDateClass: '',
        start: '2018-03-06T09:00:00+09:00',
        end: '2018-03-08T09:00:00+09:00',
        isReadOnly: true
    },
    {
        id: '4',
        calendarId: 'SCHEDULE',
        title: '5',
        category: 'allday',
        dueDateClass: '',
        start: '2018-03-06T09:00:00+09:00',
        end: '2018-03-08T09:00:00+09:00',
        isReadOnly: true
    },
]);

cal.render();

Expected Behavior

The schedule on 2018.03.09 should be shown.

without jquery/bootstrap?

hi
On a first glance it seems TUI has no hard dependency on jquery and bootstrap, could/should this component work without jquery?

Resize calendar error when widen window after dragging allday's divider

Version

v0.6.1

Development Environment

MAC
Chrome

Current Behavior

  • Daily or weekly view
  • Drag the allday's divider to resize it
  • Widen window vertically
  • Calendar didn't resize itself to fit
  • If no dragging the divider, it's ok.

2018-02-19 12_47_52

Example

Expected Behavior

Calendar should resize itself to fit after dragging allday's divider to resize it.

Default height of task panel is too wide

Version

0.9.0

Development Environment

MAC OS X, chrome

Current Behavior

Default height can show 4 schedules.
2018-03-26 7 00 37

Expected Behavior

Default height can show 2 schedules.
2018-03-26 6 59 58

Wrong date parameter of beforeCreateSchedule callback near 24 o'click

Version

v0.6.4

Development Environment

Mac
Chrome

Current Behavior

The given parameter start, end has wrong date near 24 o'clock.
Might be timezone issue.

2018-03-06 09_55_57

calendar.on('beforeCreateSchedule', function(e) {
    console.log(e.start);
    console.log(e.end);
});

Expected Behavior

The start, end parameter should be exact when near 24 o'clock.

feat: Support themes

Version

v0.9.0

Development Environment

Mac
Chrome

Current Behavior

tui-calendar provides template functions. But more customizable functionality for presentation is required. Currently only css override.

Expected Behavior

broken column width on Firefox for Windows

Hi,

I've found one bug that the table column width broken while I was testing sample page on Firefox for Windows.

https://nhnent.github.io/tui.calendar/latest/tutorial-example01-basic.html
On the weekly table, if the cell height gets shorter than scrollbar's height from resizing the cell by dragging, scrollbar disappears so the width of the cell seems calculated wrong.

The scrollbar image is resizing for shorter height on Chrome but Firefox doesn't so it's happening I guess.

I've reported that issue on Bugzilla anyway, it also needs some kind of research to find the way to solve this on client-side.

image

feat: less configuration(default css, template)

Version

v1.0.2

Development Environment

Chrome
Mac

Current Behavior

There are some configurations which can be removed for beginners.
For example

#calendar {
  position: relative;
}

#calendar * {
  box-sizing: border-box;
}

Expected Behavior

Supports default css and templates to make it ease usage

Use the eslint

Version

v0.6.0

Development Environment

Any

Current Behavior

We need using the eslint.

Expected Behavior

Use the eslint-config-tui

Add a npm script to lint the source like below

npm run eslint

feat: Add new popups, (Create/Edit schedule, View schedule) by new design

Version

v0.9.0

Development Environment

Mac
Chrome

Current Behavior

We don't have any popup to create, edit, view a schedule internally. Those are responsible for service code.

Expected Behavior

The default popups of creating, editing and viewing a schedule should be provided.

Creating and editing a schedule popup.
image

Viewing a schedule popup.
image

feat: Support task schedule's dynamic height

Version

0.8.0

Development Environment

Mac
Chrome

Current Behavior

Expected Behavior

In the task view, the schedules has dynamic height by content length.
This can be set by option.
image

Scheduler

Is there a scheduler planned for displaying resources in daily or weekly view? Anyway good job ;)

tui.calender JSON

I have downloaded Tui.calender from github.
Am trying to find How the calender displaying the data whether its in the of json or what?
Can any one help me to find out.

feat: New Design

Version

v0.8.0

Development Environment

Any

Current Behavior

Expected Behavior

Apply new design.

Exceed date is not showing without template.monthGridHeaderExceed option

Version

0.9.5

Development Environment

MAC OSX, Chrome

Current Behavior

this.calendar = new tui.Calendar('#calendar', {
    defaultView: 'month',
    template: {
        monthGridHeader: function (model) {
            var date = new Date(model.date);
            var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
            return template;
        }
    },
    month: {
        daynames: ['일', 'μ›”', 'ν™”', '수', 'λͺ©', '금', 'ν† '],
        startDayOfWeek: 0,
        narrowWeekend: true,
        grid: {
            footer: {
                height: 0
            }
        }
    },
})

2018-04-05 11 52 20

Expected Behavior

Show exceed schedule button (like +1) without additional option.

2018-04-05 6 57 20

Copywriting

Hello!

I've been watching your project and I want to make the copywriting stuff: Contact Us, About Us, FAQ, etc

Best Regards!

perf: Performance enhancement for rendering(To prevent force layout)

Version

v0.9.0

Development Environment

Mac
Chrome

Current Behavior

The force layout occurs during rendering process and slows performance.
For example,

in common.js

/**
 * Set 'title' attribute for all element that has exceeded content in
 * container
 * @param {string} selector - CSS selector {@see domutil#find}
 * @param {HTMLElement} container - container element
 */
setAutoEllipsis: function(selector, container) {
    util.forEach(domutil.find(selector, container, true), function(el) {
        if (el.offsetWidth < el.scrollWidth) {
            el.setAttribute('title', domutil.getData(el, 'title'));
        }
    });
}

in WeekdayInMonth.js

/**
 * @override
 * @param {object} viewModel - schedules view models
 */
WeekdayInMonth.prototype.render = function(viewModel) {
...
...
    contentStr += scheduleTmpl(baseViewModel);

    scheduleContainer.innerHTML = contentStr;

    common.setAutoEllipsis(
        config.classname('.weekday-schedule-title'),
        container
    );
};

in milestone.js

Milestone.prototype.render = function(viewModel) {
    var container = this.container,
        baseViewModel = this._getBaseViewModel(viewModel);

    container.style.minHeight = this.options.minHeight + 'px';
    container.innerHTML = tmpl(baseViewModel);

    util.forEach(domutil.find('li', container, true), function(el) {
        if (el.offsetWidth < el.scrollWidth) {
            el.setAttribute('title', domutil.getData(el, 'title'));
        }
    });

    this.fire('afterRender', baseViewModel);
};

Expected Behavior

Performance of rendering should be faster with preventing force layout.

No grid background color when dragging a schedule in monthly

Version

v0.6.1

Development Environment

Mac
Chrome

Current Behavior

  • In monthly, 2 weeks, 3 weeks view
  • Drag a schedule at first
  • Drag it again
  • There is no background color onto grid
    image

Expected Behavior

There must be background color when dragging a schedule everytime

tui-calendar in Vue component

Hello,

I'm trying to integrate tui-calendar 1.1 in my Vue app
Importing example from repository in to Vue component

var Calendar = require('tui-calendar');

require("./example/js/data/calendars.js");
require("./example/js/data/schedules.js");
require("./example/js/theme/dooray.js");
require("./example/js/default.js");
...

And I got

Uncaught ReferenceError: tui is not defined
in default.js:443

Please help to figure it out how 'tui' should be declared in correct way?

Rich content

Is it possible to create events with rich content (images, buttons etc) in a similar way to falcon.io?

Apply the allday template on more layer in monthly view

Version

v0.6.1

Development Environment

MAC
Chrome

Current Behavior

image 1

allday: function(schedule) {
    var className = 'test';
    return '<span class="bullet ' + className + '"></span>' + schedule.title;
},

Expected Behavior

Apply the allday template function on more layer in monthly view

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.