πŸžπŸ“…A JavaScript calendar that has everything you need.

Overview

TOAST UI Calendar

A JavaScript schedule calendar that is full featured. Now your service just got the customizable calendar.

GitHub release npm GitHub license PRs welcome code with hearth by NHN

tui-calendar-demo-nhn-corp

🚩 Table of Contents

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 use the options:

var calendar = new Calendar('#calendar', {
  usageStatistics: false
});

πŸ“™ Documents

You can also see the older versions of API page on the releases page.

✨ How Cool: 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

🎨 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

🐾 Examples

  • Basic : Example of using default options.

πŸ’Ύ Install

TOAST UI products can be used by using the package manager or downloading the source directly. However, we highly recommend using the package manager.

Via Package Manager

TOAST UI products are registered in two package managers, npm and bower. You can conveniently install it using the commands provided by each package manager. When using npm, be sure to use it in the environment Node.js is installed.

npm

$ npm install --save tui-calendar # Latest version
$ npm install --save [email protected]<version> # Specific version

bower

$ bower install tui-calendar # Latest version
$ bower install tui-calendar#<tag> # Specific version

Via Contents Delivery Network (CDN)

TOAST UI products are available over the CDN powered by TOAST Cloud.

You can use the CDN as below.

Insert style sheet files

<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />

<!-- If you use the default popups, use this. -->
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />

Insert JavaScript file

<script src="https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src="https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src="https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>

If you want to use a specific version, use the tag name instead of latest in the url's path.

The CDN directory has the following structure.

tui-calendar/
β”œβ”€ latest/
β”‚  β”œβ”€ tui-calendar.js
β”‚  └─ tui-calendar.min.js
β”‚  └─ tui-calendar.css
β”‚  └─ tui-calendar.min.css
β”œβ”€ v1.0.0/
β”‚  β”œβ”€ ...

Download Source Files

πŸ› Wrappers

πŸ”¨ Usage

HTML

Place a <div></div> where you want TOAST UI Calendar rendered.

<body>
...
<div id="calendar" style="height: 800px;"></div>
...
</body>

JavaScript

Using namespace in browser environment

var Calendar = tui.Calendar;

Using module format in node environment

var Calendar = require('tui-calendar'); /* CommonJS */
require("tui-calendar/dist/tui-calendar.css");

// If you use the default popups, use this.
require("tui-date-picker/dist/tui-date-picker.css");
require("tui-time-picker/dist/tui-time-picker.css");
import Calendar from 'tui-calendar'; /* ES6 */
import "tui-calendar/dist/tui-calendar.css";

// If you use the default popups, use this.
import 'tui-date-picker/dist/tui-date-picker.css';
import 'tui-time-picker/dist/tui-time-picker.css';

Then you can create a calendar instance with options to set configuration.

var calendar = new Calendar('#calendar', {
  defaultView: 'month',
  taskView: true,
  template: {
    monthDayname: function(dayname) {
      return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
    }
    ...
  }
});

Or you can use jquery plugin. You must include jquery before using this jquery plugin.

// jquery wrapper
var $calEl = $('#calendar').tuiCalendar({
  defaultView: 'month',
  taskView: true,
  template: {
    monthDayname: function(dayname) {
      return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
    }
    ...
  }
});

// You can get calendar instance
var calendarInstance = $calEl.data('tuiCalendar');

calendarInstance.createSchedules([...]);

🌏 Browser Support

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

πŸ”§ Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

$ git clone https://github.com/{owner}/tui.calendar.git
$ cd tui.calendar
$ npm install
$ npm run test

Develop

Let's start development! You can see your code is reflected as soon as you saving the codes by running a server. Don't miss adding test cases and then make green rights.

Run webpack-dev-server

$ npm run serve

Run karma test

$ npm run test

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

πŸ’¬ Contributing

πŸ”© Dependency

🍞 TOAST UI Family

πŸš€ Used By

πŸ“œ License

This software is licensed under the MIT Β© NHN.

Comments
  • How to show calendarInfo data on calendar schedules

    How to show calendarInfo data on calendar schedules

    Version

    Latest Version

    Expected Behavior

    How can i show CalendarInfo in this Schedule data :

    var schedules = [
                {id: 489273, title: 'Workout for 2020-04-05', isAllDay: false, start: '2020-02-01T11:30:00+09:00', end: '2020-02-01T12:00:00+09:00', goingDuration: 30, comingDuration: 30, color: '#ffffff', isVisible: true, bgColor: '#69BB2D', dragBgColor: '#69BB2D', borderColor: '#69BB2D', calendarId: 'Post', category: 'time', dueDateClass: '', customStyle: 'cursor: default;', isPending: false, isFocused: false, isReadOnly: false, isPrivate: false, location: '', attendees: '', recurrenceRule: '', state: ''},
                {id: 18073, title: 'completed with blocks', isAllDay: false, start: '2020-02-17T09:00:00+09:00', end: '2020-02-17T10:00:00+09:00', color: '#ffffff', isVisible: true, bgColor: '#54B8CC', dragBgColor: '#54B8CC', borderColor: '#54B8CC', calendarId: 'Event', category: 'time', dueDateClass: '', customStyle: '', isPending: false, isFocused: false, isReadOnly: false, isPrivate: false, location: '', attendees: '', recurrenceRule: '', state: ''}
            ];
    

    On your example (https://nhn.github.io/tui.calendar/latest/tutorial-example00-basic)

    You used chance.js to create dummy data , but i'm using above data for schedules .

    I want to some schedule data on calendar with calendar info

    Invalid Question Category: Usage 
    opened by Anzil-Aufait 19
  • Last saturday of February isn't working on timezones with Daylight Saving Time

    Last saturday of February isn't working on timezones with Daylight Saving Time

    Version

    1.7.0 | Wed Aug 08 2018

    Development Environment

    Chrome and Firefox, Windows 10

    Current Behavior

    Day not showing

    In February, a Saturday just is repeating and the next one is not working. It's happening in the last week of the month. It's not rendering, but if a create the date programmatically (I use a script that load from a WebMethod and add it), it's rendered before the Sunday. Look that the day Feb-16 is repeated and the week is starting on Saturday, not on Monday. Even if I switch to week or day view, it's still now working. I can't add or edit events.

    Detail on the start of date

    Days not showing in each year

    Year|Day -----|------ 2018|Feb-24 2019|Feb-23 2020|Feb-22 2021|Feb-27 2022|Feb-26

    Expected Behavior

    Load the calendar correctly, with all days.

    Bug NHN P❕❕❕ Category: Timezone 
    opened by augustocb23 19
  • Navigation between Calendar views

    Navigation between Calendar views

    How can I customize this calendar from month view to year view? I want to be able to navigate through all the months of the year to view different events, am finding it hard to find where you implemented the buttons you used at the top of the calendar. Am using react typescript Thank you.

    Question Answered 
    opened by GloriaTwebaze 16
  • tui.calender JSON

    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.

    Good First Issue πŸ™‹β€β™€οΈ πŸ™‹β€β™‚οΈ Question 
    opened by timepass-ok 16
  • Calendar monthly show date Range Start - End only

    Calendar monthly show date Range Start - End only

    Version

    use cdn

    Development Environment

    Mozilla Firefox

    Current Behavior

    1. i want to make absent calender for my salesman, so i can choose date from start until end. how to make it show the date only that i choose monthly ??
    2. if i am choose august 26 until september 10, if i click pervious like calendar.prev() it will become to july, how make it disabled ?

    Expected Behavior

    1. i think your tui calendar is awesome, and tui calendar can do what i want to do, but i dont know to do it. i try this too :
    if(date>new Date('2018-08-28')){
                    var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
                  }
    

    in my monthGridHeader, it will remove the date. hope you can help me @dongsik-yoo

    Question Answered 
    opened by okkypt 15
  • Reactjs Wrapper for tui.calendar

    Reactjs Wrapper for tui.calendar

    I am planning to write a Reactjs wrapper for this nice package, and have read the vuejs and angularjs implementations, however they seem to differ from the pattern that React suggests i.e. 'data down, actions up'.

    Therefore just want to ask if it is preferred to follow the other wrappers or figure our the React way?

    Question 
    opened by IniZio 15
  • Substitute util.bind with Function.bind

    Substitute util.bind with Function.bind

    As of https://caniuse.com/#feat=mdn-javascript_builtins_function_bind Function.bind is supported in IE +9, Edge +12 , Firefox +4, Chrome +7, Safari +5.1.

    ScheduleCreationPopup._onClickListeners() uses Function.bind since April 2018, and TimeCreationGuide._onDrag uses it since Mai 2017, so the aforementioned browser versions are required that long.

    β€’ Replace util.bind(x,y) with x.bind(y) β€’ Update README.md with the minimal supported versions.

    Please check if the PR fulfills these requirements

    • [ ] It's submitted to right branch according to our branching model
    • [x] It's right issue type on title
    • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [x] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change
    opened by dilyanpalauzov 14
  • fix: DST timezone bug

    fix: DST timezone bug

    Please check if the PR fulfills these requirements

    • [ ] It's submitted to right branch according to our branching model
    • [ ] It's right issue type on title
    • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [ ] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [ ] It does not introduce a breaking change or has description for the breaking change

    Description

    #257 #258 #283


    Thank you for your contribution to TOAST UI product. πŸŽ‰ 😘 ✨

    opened by dongsik-yoo 12
  • Unable to create schedule

    Unable to create schedule

    Version

    latest (cdn)

    Development Environment

    Chrome 78.0.3904.70 macOS Catalina 10.15

    Current Behavior

    I've wanted to create schedules. But it doesn't work (I've changed how the data/schedules.js worked. Others remain unchanged)

    function generateScheduleDetails(data) {
        data.activities.forEach((value, index, array) => {
          console.log('Adding ', value);
          var schedule = new ScheduleInfo();
    
          schedule.id = value.id;
          schedule.calendarId = value.calendarId;
    
          schedule.title = value.title;
          schedule.body = value.body;
    
          schedule.start = new Date(value.start);
          schedule.end = new Date(value.end);
    
          var calendar = findCalendar(value.calendarId);
    
          schedule.color = calendar.color;
          schedule.bgColor = calendar.bgColor;
          schedule.dragBgColor = calendar.dragBgColor;
          schedule.borderColor = calendar.borderColor;
    
          if (value.isAllday) {
            schedule.category = 'allday';
          } else {
            schedule.category = 'time';
          }
    
          if (schedule.category === 'milestone') {
            schedule.color = schedule.bgColor;
            schedule.bgColor = 'transparent';
            schedule.dragBgColor = 'transparent';
            schedule.borderColor = 'transparent';
          }
          console.log(schedule);
    
          ScheduleList.push(schedule);
        });
      }
    

    An example of the log adding image

    Expected Behavior

    The calendar should have some schedule pop up.

    I've also tried to use the chrome console to fetch the schedule by cal.getSchedule(id, calendarId). But it said undefined

    Invalid inactive 
    opened by LoSunny 11
  • Edit of All day Schedule Events, using default date editor/picker, produces wrong end date

    Edit of All day Schedule Events, using default date editor/picker, produces wrong end date

    Edited and corrected version

    Describe the bug

    1. Create an all-day event of any number of days.
    2. Now click on it and then click on Edit (using the default popups)
    3. Edit to be a different end date, with end date > start date
    4. The erroneous result is that the end date is one less than it should be.

    Note that if you click Update without changing anything, the end date is correct.

    To Reproduce

    Steps to reproduce the behavior:

    1. Month View, default popups
        this.calendar = new Calendar('#calendar', {
          defaultView: 'month',
          taskView: true,
          useCreationPopup: true,
          useDetailPopup: true,
          template: {
            monthDayname: function (dayname) {
              return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
            }
          }
        });
    
    1. Click on a date and add an all-day event of 1 day in length: Event Created

    2. Now click on the event so that the detail popup appears: Event details

    3. Click Edit and in new pop up make an event of exactly two days (end = start + 1 day): Event Editing

    4. Click UPDATE and result has the end date = start date Event Result

    Expected behavior

    It should create an event of two days.

    Screenshots

    See above

    Desktop (please complete the following information):

    • OS: Windows 10 Professional
    • Browser: Chrome
    • Version: 94.0.4606.61 (Official Build) (64-bit)

    Additional context

    Add any other context about the problem here.

    Bug 
    opened by knightwing-network 10
  • Customize creation popup

    Customize creation popup

    Version

    @version 1.13.1 | Tue Jul 06 2021

    Development Environment

    • language: Javascript
    • browser: Chrome
    /* calendar opts */
    var calendar = new tui.Calendar('#calendar', {
            defaultView: 'month',
            taskView: false,     
            scheduleView: true, 
            useCreationPopup: true, 
            useDetailPopup: true,   
            template: { //template calendario e popups
                task: function (schedule) {
                    return '#' + schedule.title;
                },
                taskTitle: function () {
                    return '<span class="tui-full-calendar-left-content">TASK</span>';
                },
                allday: function (schedule) {
                    return getTimeTemplate(schedule, true);
                },
                alldayTitle: function () {
                    return '<span class="tui-full-calendar-left-content">ALL DAY</span>';
                }, 
                time: function (schedule) {
                    return '<strong>' + moment(schedule.start.getTime()).format('HH:mm') + '</strong> ' + schedule.title;
                },
                titlePlaceholder: function () {
                    return 'AttivitΓ ';
                },
                locationPlaceholder: function () {
                    return 'Luogo';
                },
                startDatePlaceholder: function () {
                    return 'Inizio';
                },
                endDatePlaceholder: function () {
                    return 'Fine';
                },
                popupSave: function () {
                    return 'Salva';
                },
                popupUpdate: function () {
                    return 'Aggiorna';
                },
                popupEdit: function () {
                    return 'Modifica';
                },
                popupDelete: function () {
                    return 'Elimina';
                },
                popupDetailDate: function (isAllDay, start, end) {
                    let startDate = new Date(start);
                    let endDate = new Date(end);
    
                    console.log('startDate: ' + startDate);
                    console.log('endDate: ' + endDate);
    
                    let isSameDate = moment(startDate).isSame(endDate);
                    let endFormat = (isSameDate ? '' : 'DD.MM.YYYY ') + 'HH:mm';
    
                    if (isAllDay) {
                        return moment(startDate).format('DD.MM.YYYY') + (isSameDate ? '' : ' - ' + moment(endDate).format('DD.MM.YYYY'));
                    }
                    return (moment(startDate).format('DD.MM.YYYY') + ' ' + moment(startDate.getTime()).format('HH:mm') + ' - ' + moment(endDate.getTime()).format(endFormat));
                },
                popupDetailLocation: function (schedule) {
                    return 'Luogo : ' + schedule.location;
                },
                popupDetailUser: function (schedule) {
                    return 'Partecipanti: ' + (schedule.attendees || []).join(', ');
                },
                popupDetailState: function (schedule) {
                    return 'Stato: ' + schedule.state || 'Busy';
                },
                popupDetailRepeat: function (schedule) {
                    return 'Ricorsivit&agrave;: ' + schedule.recurrenceRule;
                },
                popupDetailBody: function (schedule) {
                    return 'Altri dettagli: ' + schedule.body;
                }
            },
            month: {
                daynames: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                startDayOfWeek: 1
            },
            week: {
                daynames: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
                startDayOfWeek: 1
            },
            calendars: calendars   
        });
    
    /* saveNewSchedule method */
    function saveNewSchedule(scheduleData) {
            let scheduleId = String(Date.now()) + getRandomNum();
    
            const schedule = {
                id: scheduleId,                  
                calendarId: scheduleData.calendarId,  
                title: scheduleData.title,         
                body: scheduleData.body,            
                start: scheduleData.start,         
                end: scheduleData.end,              
                isAllDay: scheduleData.isAllDay,    
                category: scheduleData.isAllDay ? 'allday' : 'time',  
                dueDateClass: '',                 
                attendees: scheduleData.attendees,  
                recurrenceRule: scheduleData.recurrenceRule,       
                isVisible: scheduleData.isVisible,  
                isReadOnly: scheduleData.isReadOnly,
                color: calendars.color,          
                bgColor: calendars.bgColor,      
                dragBgColor: calendars.bgColor, 
                borderColor: calendars.borderColor,                
                customStyle: scheduleData.customStyle,              
                state: scheduleData.state           
            };
            calendar.createSchedules([schedule]);
        }
    
    calendar.on({
            clickMore: function (e) {
                console.log('clickMore', e);
            },
            clickSchedule: function (e) {
                console.log('clickSchedule', e);
            },
            clickDayname: function (date) {
                console.log('clickDayname', date);
            },
            beforeCreateSchedule: function (e) {
                console.log('beforeCreateSchedule', e);
                saveNewSchedule(e);
                //e.guide.clearGuideElement();
            },
            beforeUpdateSchedule: function (e) {
                const {schedule, changes} = e;
                console.log('beforeUpdateSchedule', e);
    
                /*TODO:
                if (schedule.isReadOnly === false) {
                    calendar.updateSchedule(schedule.id, schedule.calendarId, changes);}
                */
            },
            beforeDeleteSchedule: function (e) {
                console.log('beforeDeleteSchedule', e);
                calendar.deleteSchedule(e.schedule.id, e.schedule.calendarId);
            },
            afterRenderSchedule: function (e) {
                const schedule = e.schedule;
                let element = calendar.getElement(schedule.id, schedule.calendarId);
                console.log('afterRenderSchedule', element);
            }
        });
    

    Current Behavior

    Creation popup not showing "read only" & "attendees" options and show only "private" padlock.

    Expected Behavior

    I would to custumize the creation popup, but I can't find the way to do this. I've to show "Read only","Attendees" field s and remove "Private" padlock. How can I proceed? I read about this: https://github.com/nhn/tui.calendar/blob/master/docs/getting-started.md#customize-popups So far everything ok! ...But how can I "pass" the my template to use it? And where\how should I write it??

    Thanks!!!

    Question Answered 
    opened by saraxp98 10
  • Support for category:

    Support for category: "halfday"

    Version

    Lastet (JS).

    Current Behavior

    From what I could find, we only have the option to show a full day or a timeslot. This is a personal calendar where it is not allowed to have multiple events at the same time. One common requirement we have would be to display a half-day on the monthly view, as opposed to the current line that covers about 1/4 of the screen.

    Expected Behavior

    Is there a workaround to the category "allday" to have it take up half a monthly day? (probably not a hidden option, but CSS I'd assume?)

    category: "halfday" or category: "halfday-am" / category: "halfday-pm"

    Feature 
    opened by sabatale 1
  • Opportunity to set min events height to 5 min.

    Opportunity to set min events height to 5 min.

    I saw previous discussion about that issue, but maybe something new approach to resolve was founded ? Currently I found cheat to calculate events height manually(just use createEvents method for it) but it stop works as soon as event should be "cut"(cause it take small part of two days but we can't control calculating of second part height) Updates?)

    Duplicate Enhancement 
    opened by skillforce 3
  • Docs - Invalid script links for CDN

    Docs - Invalid script links for CDN

    The getting-started.md file has some links that need a space removed under the Installation Using Contents Delivery Network section.

    Current instructions

    <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
    <script src="https://uicdn.toast.com/calendar /latest/toastui-calendar.min.js"></script>
    
    <!-- To get bundle file for legacy browser -->
    <!-- <script src="https://uicdn.toast.com/calendar /latest/toastui-calendar.ie11.min.js"></script> -->
    
    <!-- Import as es module -->
    <!-- <script type="module" src="https:// uicdn.toast.com/calendar/latest/toastui-calendar.mjs"></script> -->
    

    Corrected instructions

    <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
    <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
    
    <!-- To get bundle file for legacy browser -->
    <!-- <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.ie11.min.js"></script> -->
    
    <!-- Import as es module -->
    <!-- <script type="module" src="https://uicdn.toast.com/calendar/latest/toastui-calendar.mjs"></script> -->
    

    Fixing this should make getting started just a little bit easier.

    Good First Issue πŸ™‹β€β™€οΈ πŸ™‹β€β™‚οΈ Category: Docs 2.0 
    opened by ryancronrath 1
  • readOnly events require two touches to open

    readOnly events require two touches to open

    Hi team πŸ‘‹

    Using the v2 for some weeks already, everything was smooth. However, I found that when I’m using readOnly events, on a touch device, I need to click two times to open.

    When readOnly is disabled, you click one time and then click where you want to rearrange the calendar.

    In this case, when readOnly is enabled after the first touch on the event, wherever I click inside the calendar it will open. Clarifying, touching one time and then another time in any area of the calendar will trigger the event.

    The best behaviour would be when readOnly is enabled, it requires just one touch.

    Really thank you for your awesome work πŸ™

    Enhancement 
    opened by Tragio 4
  • See more popup off screen when calendar is in an `overflow-x: auto` container

    See more popup off screen when calendar is in an `overflow-x: auto` container

    Version

    • @toast-ui/calendar: 2.1.3

    Test Environment

    • Chrome on Windows
    • Firefox on Android

    Current Behavior

    I have the following html and css for the calendar: The calendar is supposed to be viewed on a mobile device, therefore it is scrollable through the .calendar-container wrapper.

    <div class="calendar-container">
      <div class="calendar" style="width: 800px" id="calendar" />
    </div>
    
    .calendar-container {
      width: 100%;
      overflow-x: auto;
    }
    .calendar {
      height: 1200px;
    }
    

    When the container is small enough to have a horizontal scrollbar and the "see-more" popup is shown for an event that is only visible through scrolling, then this popup escapes the container element somehow.

    A little clip showing the problem

    https://user-images.githubusercontent.com/1063187/187667835-a9b77086-e603-43c0-80dc-9dca8d0acf50.mp4

    Expected Behavior

    The "see more" popup should be either in the center of the calendar or directly on top of the day it references.

    Bug Category: Popup - More View 2.0 
    opened by Tiim 1
  • Rendering of several non-overlapping events in the same hour wastes space

    Rendering of several non-overlapping events in the same hour wastes space

    Hello,

    I'm using TUI Calendar 1.15.3 and I'm trying to display the appointments for the 3 locations (I've created 3 calendars as a result) a client of mine utilizes. The appointments have a fixed duration of 15 minutes and can be back-to-back, in which case they don't overlap but there's no "free" time between them. Unfortunately, when rendering the calendars it looks like the renderer considers 1 hour as the "rendering block", so two back-to-back appointments are rendered in half width, although they could render full width one below the other. I tried to change their end time a bit so that they have some space (for example, I tried 10:00-10:14 and 10:15-10:29 instead of 10:00-10:15 and 10:15-10:30) but that didn't work either. I copied the generated HTML of my application and the data JSON to a public URL for everyone to see what I mean, you can access it at https://sotis.info/calendarproblem.html The filtering fields on the left don't work, but that's normal, I replaced the ajax call to the server with a static JSON, no problem there. I'm also attaching a screenshot from my browser: image See how much wasted space there is, confusing users and preventing more information from the title from being visible.

    Is this an issue with TUI Calendar, or am I doing something wrong?

    Duplicate Wont Fix 
    opened by sotis 1
  • [email protected](Aug 16, 2022)

    Fixes

    • Fixed an issue that the default form popup is accessible through the event details popup even though the option is set to useFormPopup: false by @adhrinae in https://github.com/nhn/tui.calendar/pull/1252

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.1.3

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 9, 2022)

    Fixes

    • Fixed an error occured when selecting date/time with week.hourStart/hourEnd option (fix #1238) by @adhrinae in https://github.com/nhn/tui.calendar/pull/1242

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.1.2

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Aug 3, 2022)

    Fixes

    • Fixed to check if the moving event is in the previous/next month or year in the week/day view by @adhrinae in https://github.com/nhn/tui.calendar/pull/1236
    • Fixed that inputs are cleared when toggling 'All day' checkbox or changing calendar (fix #1233) by @adhrinae in https://github.com/nhn/tui.calendar/pull/1235

    Maintenance

    • Improved vue-calendar and react-calendar examples by @dotaitch in https://github.com/nhn/tui.calendar/pull/1230

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.1.1

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 28, 2022)

    Features

    • Collapsing duplicate events by @dotaitch in https://github.com/nhn/tui.calendar/pull/1215, https://github.com/nhn/tui.calendar/pull/1226

    Fixes

    • Fixed that dragging event is not working as expected when the week.hourStart option is set (fix #1228) by @adhrinae in https://github.com/nhn/tui.calendar/pull/1229
    • Replaced a hard-coded constant by @HansSchouten in https://github.com/nhn/tui.calendar/pull/1225

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.1.0

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 22, 2022)

    Fixes

    • Fixed that a 30-minutes event with goingDuration and comingDuration property might have a wrong height by @lja1018 in https://github.com/nhn/tui.calendar/pull/1206
    • Fixed the way rendering borders in monthly view by @lja1018 in https://github.com/nhn/tui.calendar/pull/1207
    • Fixed the issue that the startDayOfWeek was not working correctly in weekly view (fix #1198) by @lja1018 in https://github.com/nhn/tui.calendar/pull/1214
    • Fixed the issue that rendering the grid selection was not accurate when the narrowWeekend option was enabled by @lja1018 in https://github.com/nhn/tui.calendar/pull/1211
    • Fixed that the clickEvent instance event was invoked when dragging events (fix #1216) by @adhrinae in https://github.com/nhn/tui.calendar/pull/1218
    • Fixed that events at the edge of the week were not rendered while the timezone option is enabled by @adhrinae in https://github.com/nhn/tui.calendar/pull/1217
    • Fixed that events in the standard timezone had an hour difference when the system timezone is using DST(Daylight Saving Time) by @adhrinae in https://github.com/nhn/tui.calendar/pull/1222

    Maintenance

    • Bumped terser from 4.8.0 to 4.8.1 by @dependabot in https://github.com/nhn/tui.calendar/pull/1220
    • Updated dependencies by @lja1018 in https://github.com/nhn/tui.calendar/pull/1221

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.0.5

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 11, 2022)

    Fixes

    • Hotfix - Removed unnecessary global variable by @adhrinae in https://github.com/nhn/tui.calendar/pull/1203
      • If you're using 2.0.3 with timezone options It doesn't work properly. Please update to this version immediately

    Maintenance

    • env: polish package build process by @adhrinae in https://github.com/nhn/tui.calendar/pull/1204

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]@2.0.4

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 11, 2022)

    Fixes

    • Fixed detail popup position after scrolling by @lja1018 in https://github.com/nhn/tui.calendar/pull/1192
    • Fixed see more popup position when it is rendered out of the calendar container by @lja1018 in https://github.com/nhn/tui.calendar/pull/1196
    • Set proper height when moving and resizing an event with a going or coming duration by @dotaitch in https://github.com/nhn/tui.calendar/pull/1195
    • Set default calendarId when opening the event form popup by @adhrinae in https://github.com/nhn/tui.calendar/pull/1194

    Maintenance

    • Fixed broken CI by @adhrinae in https://github.com/nhn/tui.calendar/pull/1193
    • Replaced a raw esbuild build script with Vite by @adhrinae in https://github.com/nhn/tui.calendar/pull/1200
    • Bumped moment from 2.29.3 to 2.29.4 by @dependabot in https://github.com/nhn/tui.calendar/pull/1201

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected][email protected]

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 6, 2022)

    Fixes

    • Fixed details popup not opening on click for read-only events by @deva-ct in https://github.com/nhn/tui.calendar/pull/1178, https://github.com/nhn/tui.calendar/pull/1179
    • Fixed border-radius values of horizontal events by @dotaitch in https://github.com/nhn/tui.calendar/pull/1182

    Documentation

    • Added a guide on changing the filename by @dotaitch in https://github.com/nhn/tui.calendar/pull/1174
    • Improved english translation by @adhrinae in https://github.com/nhn/tui.calendar/pull/1181, https://github.com/nhn/tui.calendar/pull/1185
    • Updated contributing guidelines by @dotaitch in https://github.com/nhn/tui.calendar/pull/1183
    • Fixed import css path by @Tragio in https://github.com/nhn/tui.calendar/pull/1175

    Maintenance

    • Added support for IE11 in the examples by @dotaitch in https://github.com/nhn/tui.calendar/pull/1177
    • Added actions updating relative links in readme before publishing npm and tuidoc by @dotaitch in https://github.com/nhn/tui.calendar/pull/1176
    • Exported the /dist folder to import css file by @adhrinae in https://github.com/nhn/tui.calendar/pull/1187
    • Organized dependencies by @adhrinae in https://github.com/nhn/tui.calendar/pull/1188

    Typings

    • Exported more types by @adhrinae in https://github.com/nhn/tui.calendar/pull/1186

    Full Changelog: https://github.com/nhn/tui.calendar/compare/[email protected]

    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Jun 30, 2022)

    Fix

    • Fixed an issue that a bundle for IE11 is not generated properly

    Full Changelog: https://github.com/nhn/tui.calendar/compare/v2.0.0...v2.0.1

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Jun 30, 2022)

    Announcing TOAST UI Calendar v2 πŸŽ‰

    We are happy to be able to show you a new TOAST UI Calendar.

    This major update does not include many new features, but we have spent a lot of time rebuilding most of the applications for the modern JavaScript development environment. Thanks to this, we expect that implementing new features and debugging will be easier than the legacy codebase.

    What's new

    Rebuilt with Preact X

    The previous version was written in Vanilla JS and targeted ES5 without Babel. While the codebase was getting bigger, it was getting harder to debug and understand.

    Also, the previous version cannot handle multiple instances in the same document because of its fundamental limitation coming from handlebars.js.

    After a lengthy investigation and discussion, we decided to use Preact X as the core of the calendar, and rewrite the calendar with it. We expect that the future development with Preact will make us easier to bring new features and fix problems.

    However, This changes browser compatibility. It can only support IE11+ though the previous version could support IE9+. And you need to use the separate bundle to support older browsers like IE11, which has a bigger bundle (about 30% bigger than the normal bundle).

    For more info, Please check the documentation.

    Bundle size improvement

    Thanks to the new development environment, We could reduce the bundle size of the calendar. See the image below(from BundlePhobia):

    iShot_2022-07-01_10 40 50

    Document Enhancement

    Even though All TOAST UI Products have powerful features, It has been hard to provide easy-to-understand and useful documents. Especially, TOAST UI Calendar needs to have more clear documents for users.

    With this release, we wanted to give you better documentation, considering 'How can we make docs easier to read and easier to find what users want.

    We also provide API documentation and examples through our site. But The full details are and will be in here.

    Caveats

    • The term Schedule is changed to Event.Β https://github.com/nhn/tui.calendar/issues/429
    • Polished unclear option properties.Β For more information, check the Option documentation.
    • You can now use the nested objects for setting the theme.Β For more information, check the Theme documentation.

    How to use the new version

    For quick starters, You can install the npm package to your project:

    # Installing package
    npm install --save @toast-ui/calendar
    
    import Calendar from '@toast-ui/calendar';
    
    const container = document.getElementById('calendar');
    const calendar = new Calendar(container);
    

    But we recommend you to read the Getting Started guide first.

    Leaving feedback

    If you have any questions about the project, leave a question in the 'Q&A' of GitHub Discussion. (But maybe there's an answer in the documentation)

    Or create an issue with 2.0 and Bug labels when you find a bug.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.4(Jun 22, 2022)

    What's Changed

    • refactor: rename dayname to dayName by @adhrinae in https://github.com/nhn/tui.calendar/pull/1159
    • feat: implement week.showNowIndicator option by @dotaitch in https://github.com/nhn/tui.calendar/pull/1162
    • feat: implement scrollToNow by @lja1018 in https://github.com/nhn/tui.calendar/pull/1160
    • docs: use @toast-ui/doc to generate documentation by @adhrinae in https://github.com/nhn/tui.calendar/pull/1163
    • feat: pass grid selection elements when selectDateTime custom event is fired by @lja1018 in https://github.com/nhn/tui.calendar/pull/1164
    • feat: implement clearGridSelections by @lja1018 in https://github.com/nhn/tui.calendar/pull/1165

    Full Changelog: https://github.com/nhn/tui.calendar/compare/v2.0.0-alpha.3...v2.0.0-alpha.4

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.3(Jun 16, 2022)

    What's Changed

    • env: add action steps to publish docs by @adhrinae in https://github.com/nhn/tui.calendar/pull/1158
    • feat: close a popup when clicking outside by @dotaitch in https://github.com/nhn/tui.calendar/pull/1155
    • feat: implement missing week options by @adhrinae in https://github.com/nhn/tui.calendar/pull/1157
    • feat: calibrate timed event move by @lja1018 in https://github.com/nhn/tui.calendar/pull/1153
    • fix: setDate reflects renderRange by @lja1018 in https://github.com/nhn/tui.calendar/pull/1156

    Full Changelog: https://github.com/nhn/tui.calendar/compare/v2.0.0-alpha.2...v2.0.0-alpha.3

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.2(Jun 14, 2022)

    What's Changed

    • env: export type declaration files of index.ts only by @dotaitch in https://github.com/nhn/tui.calendar/pull/1152
    • refactor: remove EventUIModel.create and use new EventUIModel by @dotaitch in https://github.com/nhn/tui.calendar/pull/1150
    • feat: implement missing month options by @adhrinae in https://github.com/nhn/tui.calendar/pull/1151

    Full Changelog: https://github.com/nhn/tui.calendar/compare/v2.0.0-alpha.1...v2.0.0-alpha.2

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-alpha.1(Jun 10, 2022)

    Announcing TOAST UI Calendar v2 πŸŽ‰

    We are happy to be able to show you a new TOAST UI Calendar.

    This major update does not include many new features, but we have spent a lot of time rebuilding most of the applications for the modern JavaScript development environment. Thanks to this, we expect that implementing new features and debugging will be easier than the legacy codebase.

    What's new

    Rebuilt with Preact X

    The previous version was written in Vanilla JS and targeted ES5 without Babel. While the codebase was getting bigger, it was getting harder to debug and understand it.

    Also, the previous version cannot handle multiple instances in the same document because of its fundamental limitation coming from handlebars.js.

    After a lengthy investigation and discussion, we made the decision to use Preact X as the core of the calendar, and rewrite the calendar with it. We expect that the future development with Preact will make us easier to bring new features and fix problems.

    However, This changes browser compatibility. It can only support IE11+ though the previous version could support IE9+. And you need to use the separate bundle to support older browsers like IE11, which has a bigger size bundle (about 30% bigger than the normal bundle).

    Document Enhancement

    Even though All TOAST UI Products have powerful features, It has been hard to provide easy-to-understand and useful documents. As the same as other products, Β TOAST UI Calendar needs to have more clear documents for users.

    With this release, we wanted to give you better documentation, considering 'How can we make docs easier to read and easier to find what users want. At the very early stage of it, we wrote docs from the bottom and wrapped them using Storybook Docs.

    Storybook Docs is only in the midway of this documentation journey. We will embrace other tools for making better documentation of all products in the long term.

    ⚠️ We wrote the Korean documentation first. For non-Korean speakers, Please be patient until we upload the English documentation as soon as possible.

    (🚧 In Development) Server Side Rendering Support

    We made progress that making the calendar supports server-side rendering. We hope this is helpful for users using TOAST UI Calendar for their modern frontend development environment.

    But there is still room for improvement in this feature. It needs to be tested in the various frameworks or hand-made SSR environments, etc.

    For more information, please refer to the renderToString method in the doc.

    Others

    • The term Schedule is changed to Event.Β https://github.com/nhn/tui.calendar/issues/429
    • Polished unclear option properties.Β For more information, check the Option documentation.
    • You can now use the nested objects for setting the theme.Β For more information, check the Theme documentation.

    Road to the public release

    • We will fix any critical bugs and develop in-development features, and options as our first priority.
    • The alpha release doesn't include React & Vue wrapper components. We are going to make them. You can make your own wrapper, though.

    How to use the new version & Leaving feedback

    You can now use the new calendar, installing the npm package to your project:

    # Installing package
    npm install @toast-ui/[email protected]
    
    import Calendar from '@toast-ui/calendar';
    
    const container = document.getElementById('calendar');
    const calendar = new Calendar(container);
    

    Please note that the alpha version has many pitfalls.

    If you have any questions about the project, leave a question in the 'Q&A' of GitHub Discussion. (But maybe there's an answer in the documentation)

    Or create an issue with 2.0 and Bug labels when you found a bug.

    Source code(tar.gz)
    Source code(zip)
Contra - Combines GitHub and GitLab contributions calendar to create a single calendar

Welcome to Contra ?? Combines GitHub and GitLab contributions calendar to create

Ahmet Korkmaz 8 Aug 13, 2022
Simple-calendar-app - Simple Vue calendar (date-picker)

Simple vue calendar (date-picker) Vue Moment.js Installation git clone npm i npm

Dmitry Chinenov 2 Jun 14, 2022
vue calendar fullCalendar. no jquery required. Schedule events management

##vue-fullcalendar Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only su

Sunny Wang 1.5k Sep 24, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here δΈ­ζ–‡ζ–‡ζ‘£ Requirements vue: ^2

Geoff Zhu 632 Jul 30, 2022
Calendar component

vue-calendar-picker Calendar component vue-calendar-picker demo on jsfiddle Example - basic <template> <calendar></calendar> </template> <script>

Franck Freiburger 48 Jul 22, 2021
A vue component for lunar calendar.

vue-lunar-calendar A vue component for lunar calendar. Uses Moment.js for date operations. This is the Korean lunar calendar. It is different from Chi

Kim WooHyun 70 Aug 20, 2022
Simple Vue component to show a month-grid calendar with events

VueSimpleCalendar Introduction vue-simple-calendar is a flexible, themeable, lightweight calendar component for Vue that supports multi-day scheduled

Richard Tallent 742 Sep 29, 2022
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

Vincent 55 May 2, 2022
An elegant calendar and datepicker plugin for Vue.

An elegant calendar and datepicker plugin for Vuejs. npm i --save v-calendar Documentation For full documentation, visit vcalendar.io. Attributes High

Nathan Reyes 3.6k Oct 4, 2022
A simple infinite calendar component in Vue 2

vue-infinite-calendar A simple infinite calendar component in Vue 2 Build Setup # install dependencies npm install # serve with hot reload at localho

Rares S 15 Feb 28, 2022
A calendar component for Vue.js

calendar Chinese This is a calendar component based on vue.js . support custom content. No dependencies. Currently, It only supports month view. You c

Kylin 47 Aug 16, 2022
Full calendar base on Vue2 and momentjs.

Vue2 Calendar Component Full calendar base on Vue2 and dayjs. Support month and week view. Custom date item style with scopeSlots. δΈ­ζ–‡ζ–‡ζ‘£ ?? Live demo I

Kit 76 Jun 28, 2022
vue 2.x calendar component

vue2-calendar vue 2 calendar, datepicker component which supported lunar or date event Live Demo >> This project is not only a vue component, but also

Terry Cai 485 Jun 9, 2022
Vue.js wrapper for TOAST UI Calendar

Vue TOAST UI Calendar A Vue.js wrapper for TOAST UI Calendar Installation npm install --save tui-calendar @lkmadushan/vue-tuicalendar Usage Example Tr

Kalpa Madushan Perera 129 Aug 13, 2022
Toast UI Calendar for Vue

TOAST UI Calendar for Vue This is Vue component wrapping TOAST UI Calendar. ?? Table of Contents Collect statistics on the use of open source Install

NHN 196 Aug 12, 2022
Vue.js Functional Calendar | Component/Package

Vue Functional Calendar Modern calendar and datepicker module for Vue.js Demo Demo: https://y3jnxov469.codesandbox.io/ Lightweight, high-performance c

Manuk 417 Sep 30, 2022
A Vue JS full calendar, no dependency, no BS. :metal:

vue-cal A Vue JS full calendar, no dependency, no BS. ?? Installation npm i vue-cal Vue 3 npm i [email protected] Demo & Documentation antoniandre.github

Antoni 928 Oct 1, 2022
A full 12-Month view calendar made by vue.js.

English | 繁體中文 There is no full year (12 months on a page) calendar right now, the Vue-material-year-calendar is designed to solve this problem. ?? 12

null 109 Sep 22, 2022
Simple and clean calendar written in Vue.js

Vuelendar Simple and clean calendar written in Vue.js. Check out full Vuelendar's documentation here. Features Select single date Select range of date

The Codest 76 Oct 5, 2022