Change time or date from input fields in custom popup

[thomasdevries]

Latest

Test Environment

Google Chrome

Current Behavior

I made a custom popup with custom date & time fields. When I change the date or time (see example image), I would like to see the blue block (14:00 - 14:30) change to the values from the input fields (15:00 - 15:30) and move to the according slot in the calendar. How can I change these values from the input fields?

// Write example code

Expected Behavior

[adhrinae]

@thomasdevries

I haven't thought about that actually. It would be great if there's a way to modify the range of selection(we call it grid selection) with a public method.

But I'm afraid to say that you can't do it at this moment.

[MarGraz]

@thomasdevries

In the latest version, 2.1.3, I'm trying to implement a custom popup, but in the documentation I didn't find an explanation on how to use the "events" - I opened an issue here -.

Could you please share the name of the available events? Thank you

[adhrinae]

@MarGraz

You can find the docs start reading from README.md.

Here's a documentation about instance events.

[MarGraz]

@MarGraz

You can find the docs start reading from README.md.

Here's a documentation about instance events.

Thank you for your reply, I will use the documentation from GitHub, because I was reading the documentation available here, but no "events" chapter was present. Thank you

[jowpurcinelli]

@MarGraz Hi, would you please share how you created the customized popup? I'm struggling on that

[MarGraz]

@jowpurcinelli yes, it's not difficult.

In the html page where you have installed the calendar, in the script section where you have initialized the calendar, you need to intercept the calendar events in this way:

<script type="text/javascript">

const Calendar = tui.Calendar;
       // --- Get the calendar html element
       const container = document.getElementById('tui-calendar');
       const options = {
           defaultView: 'week',
           usageStatistics: false,
           calendars: [
               {
                   id: 'cal1',
                   name: 'Personal',
                   backgroundColor: '#03bd9e',
               },
               {
                   id: 'cal2',
                   name: 'Work',
                   backgroundColor: '#00a9ff',
               },
           ]
       };

       const calendar = new Calendar(container, options);

       // --- Down here the event handlers https://github.com/nhn/tui.calendar/blob/main/docs/en/apis/calendar.md#instance-events
       
       calendar.on({
           'selectDateTime': function (e) {
               console.log('selectDateTime when click on the calendar ', e);

               // ---> Here you can call the function where you can trigger your custom modal
               showMyModal();
           },
           'beforeCreateEvent': function (e) {
               console.log('beforeCreateSchedule', e);
               // open a creation popup
           },
           'beforeUpdateSchedule': function (e) {
               console.log('beforeUpdateSchedule', e);
               e.schedule.start = e.start;
               e.schedule.end = e.end;
               cal.updateSchedule(e.schedule.id, e.schedule.calendarId, e.schedule);
           },
           'beforeDeleteSchedule': function (e) {
               console.log('beforeDeleteSchedule', e);
               cal.deleteSchedule(e.schedule.id, e.schedule.calendarId);
           }
       });

       // --- Here a function example to trigger your bootstrap custom modal
       
       function showMyModal() {

           let modal = new bootstrap.Modal(document.getElementById('my-hidden-modal'), {
               keyboard: false
           });

           modal.show();
       }

</script>

That's it. I hope this can help you and other people.

[jowpurcinelli]

@MarGraz You`re the best man, Thanks a lot for the knowledge sharing! Grazie

[MarGraz]

@jowpurcinelli no problem 😊 sharing is caring. Prego 😋