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

Version

1.7.0 | Wed Aug 08 2018

Development Environment

Chrome and Firefox, Windows 10

Current Behavior

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.

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.

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.

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.

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

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?

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

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. 🎉 😘 ✨

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

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

Hello, I would like to answer this question please (I am a French beginner developer so apologize me in advance if the answer is obvious ...)

Thank you in advance and again forgive me if I missed something that has already been said.

Version

tui-calendar: 1.7.0

Development Environment

Windows 10, chrome, Vue.js

Current Behavior

Expected Behavior

Remove the scrollbar

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>';
        }
      }
    });

2. Click on a date and add an all-day event of 1 day in length: Event Created

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

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

5. 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.

Version

2.1.3

Test Environment

Chrome

Current Behavior

In my project, the useDetailPopup option is set true and the useFormPopup is false. After selecting en event I get the default DetailPopup. But if I click on "Edit" in this popup, the popup does not close.

// Write example code

Expected Behavior

Can I close the default DetailPopup somewhere in beforeUpdateEvent? If so, how?

How do I force Calendar to recalculate events height on window resize?

I am using Angular, with flex container:

<div #calendar class="calendar"></div>

@HostListener('window:resize', ['$event'])
onResize() {
  this.calendar.render();
}

.calendar {
  @apply flex flex-col h-screen;

  .toastui-calendar-layout {
    @apply flex-1;
  }
}

Before window resize:

After windows resize:

Events overflow, instead of compacting, like this (hard reload):

I tried calendar.clear() along with calendar.createEvents(), but the result is the same.

The only way it worked is by calendar.destroy() along with calendar.createEvents(), but this causes horrible flickering.

I created a new Angular 14 application and added @toast-ui/calendar dependency.

<div #calendar></div>

import { AfterViewInit, Component } from '@angular/core';
import Calendar from '@toast-ui/calendar';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const calendar = new Calendar('#calendar', {
      usageStatistics: false,
    });
  }
}

@import "@toast-ui/calendar/dist/toastui-calendar.min.css";

The application won't compile, throwing a bunch of errors:

Error: node_modules/@toast-ui/calendar/types/factory/calendarCore.d.ts:3:24 - error TS2307: Cannot find module '../model/eventModel' or its corresponding type declarations.

3 import EventModel from "../model/eventModel";
                         ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/factory/calendarCore.d.ts:5:31 - error TS2307: Cannot find module '../utils/eventBus' or its corresponding type declarations.

5 import type { EventBus } from "../utils/eventBus";
                                ~~~~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/factory/calendarCore.d.ts:9:82 - error TS2307: Cannot find module '../types/store' or its corresponding type declarations.

9 import type { CalendarState, CalendarStore, Dispatchers, InternalStoreAPI } from "../types/store";
                                                                                   ~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/types/events.d.ts:2:29 - error TS2307: Cannot find module '../model/eventModel' or its corresponding type declarations.

2 import type EventModel from "../model/eventModel";
                              ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/types/events.d.ts:3:31 - error TS2307: Cannot find module '../model/eventUIModel' or its corresponding type declarations.

3 import type EventUIModel from "../model/eventUIModel";
                                ~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/types/events.d.ts:5:29 - error TS2307: Cannot find module '../utils/collection' or its corresponding type declarations.

5 import type Collection from "../utils/collection";
                              ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@toast-ui/calendar/types/types/events.d.ts:6:32 - error TS2307: Cannot find module './components/common' or its corresponding type declarations.

6 import type { StyleProp } from "./components/common";

There are no model and util directories inside library.

Version

TOAST UI Calendar 2nd Edition @version 2.1.3

Test Environment

Browser: Chrome Version 108.0.5359.99 (Official Build) (64-bit)

Current Behavior

When using the calendar in readonly mode the afterRenderEvent is not fired when redering events, this is the code i use:

const app = calendar.querySelector(".tui-main-calendar");

calendar.tuiCalendar = new tui.Calendar(app, {
    defaultView: 'month',
    disableDblClick: true,
    usageStatistics: false,
    useDetailPopup: false,
    useFormPopup: false,
    isReadOnly: true,
    month: {
        startDayOfWeek: 1,
        dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
    },
    theme: {
        common: {
            holiday: {
                color: 'black',
            },
        },
        month: {
            holidayExceptThisMonth: {
                color: 'rgba(51, 51, 51, 0.4)',
            },
        },
    }
});

calendar.tuiCalendar.on('afterRenderEvent', (eventObj) => {
    console.log(eventObj);
});

calendar.tuiCalendar.createEvents([
    {
        id: 'event3',
        calendarId: 'cal2',
        title: 'Vacation',
        start: '2022-12-27',
        end: '2022-12-27',
        description: "Deze periode hebben we vacantie",
        isAllday: true,
        category: 'allday',
    },
    {
        id: 'event3',
        calendarId: 'cal2',
        title: 'Vacation',
        start: '2022-12-29',
        end: '2022-12-29',
        description: "Deze periode hebben we vacantie",
        isAllday: true,
        category: 'allday',
    },
]);

When i switch isReadOnly to false it will output 2 events in the console. When isReadOnly is true it will not log anything.

Expected Behavior

I couldn't find anything in the docs about this event not working in read only mode (some other events in the docs do state isReadOnly: false is needed). But the events that need isReadOnly: false are mostly events that only happen when editing/changing/removing things which isn't posible in read only mode so it makes sense. I think there are many use cases where you want the read only mode in combination with this event.

Version

2.1.3 react：16.13.1

Test Environment

Current Behavior

// Write example code
const getCalInstance = useCallback(() => calendarRef.current?.getInstance?.(), []);
const onBeforeUpdateEvent = (updateData) => {
    console.group('onBeforeUpdateEvent');
    console.log(updateData);
    console.groupEnd();

    const targetEvent = updateData.event;
    const changes = { ...updateData.changes };

    getCalInstance().updateEvent(targetEvent.id, targetEvent.calendarId, changes);
  };

  <Calendar
    height="900px"
    calendars={initialCalendars}
    month={{ startDayOfWeek: 1 }}
    events={initialEvents}
    template={{
      allday(event) {
        return `<span style="color: #fff; height: 80px; display: inline-block; background-color: ${event.backgroundColor};">${event.title}</span>`;
      },
      alldayTitle(e) {
        return 'alldayTitle';
      },
      popupEdit() {
        return '编辑';
      },
      popupDelete() {
        return '删除';
      },
      popupSave() {
        return '保存';
      },
      popupUpdate() {
        return '更新';
      },
    }}
    // theme={theme}
    timezone={{
      zones: [
        {
          timezoneName: 'Asia/Shanghai',
          displayLabel: '北京时间',
          tooltip: 'UTC+09:00',
        },
      ],
    }}
    useDetailPopup
    useFormPopup
    view={selectedView}
    week={{
      eventView: ['allday'],
      taskView: false,
    }}
    ref={calendarRef}
    onAfterRenderEvent={onAfterRenderEvent}
    onBeforeDeleteEvent={onBeforeDeleteEvent}
    onClickDayname={onClickDayName}
    onClickEvent={onClickEvent}
    onClickTimezonesCollapseBtn={onClickTimezonesCollapseBtn}
    onBeforeUpdateEvent={onBeforeUpdateEvent}
  />

Expected Behavior

Can be edited normally

Version

2.1.3

Test Environment

Chrome, Windows 11

Current Behavior

Event width in week view is distributed evenly according to the number of events on a given day.

But if at least three events overlap and one of them is very long, consecutive single overlaps are receiving only the fractional width and don't take the rest of the space in the column.

See screenshot below:

You can recreate this in the demo calendar https://ui.toast.com/tui-calendar

Expected Behavior

The single overlaps should take the whole available space, like:

This used to be the behaviour in older versions of the calendar, e.g. 1.0.6. (react wrapper)