Customize popup

[NagarRahul]

Hi everyone, I want to customize the popup dialog according to me. I want to add more fields to that UI. Can you please help me? @cybaek @shiren @apcro @mariusa

Version

Write the version that you are currently using.

Development Environment

Write the browser type, OS and so on.

Current Behavior

Write a description of the current operation. You can add sample code, 'CodePen' or 'jsfiddle' links.

// Write example code

Expected Behavior

Write a description of the future action.

[jungeun-cho]

There is no customizable option for popups. If you want it, you can fork this and edit it. See these sources.

https://github.com/nhnent/tui.calendar/blob/master/src/js/view/popup/scheduleCreationPopup.js https://github.com/nhnent/tui.calendar/blob/master/src/js/view/template/popup/scheduleCreationPopup.hbs https://github.com/nhnent/tui.calendar/blob/master/src/js/view/popup/scheduleDetailPopup.js https://github.com/nhnent/tui.calendar/blob/master/src/js/view/template/popup/scheduleDetailPopup.hbs

otherwise,

You can use your own popup to display and create schedules. To disable default popup, use the options useCreationPopup=false, useDetailPopup=false.

var cal = new Calendar('#calendar', {
    useCreationPopup: false,
    useDetailPopup: false,
...
});

And when you get the event beforeCreateSchedule, you would display a popup for creating a schedule. And when you get the event 'clickSchedule', you would display a popup for displaying a schedule.

// event handlers
cal.on({
    'clickSchedule': function(e) {
        console.log('clickSchedule', e);
    },
    'beforeCreateSchedule': function(e) {
        console.log('beforeCreateSchedule', e);
        // open a creation popup (your custom 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);
    }
});

[bigcatLiu]

if i want to creat own popup to display and create schedules, How can I solve the problem of popup positioning.

[adhrinae]

@bigcatLiu

You can get the guide element of selection from the event object passed as an argument from the beforeCreateSchedule event.

There is a difference between the week/day view and the month view.

In the month view

cal.on('beforeCreateSchedule' (e) => {
  // It's an object. key is the index of the row, and the value is the guide element.
  const guideElemenets = e.guide.guideElements
});

In the week view

cal.on('beforeCreateSchedule' (e) => {
  const guideElemenet = e.guide.guideElement // The guide element itself.
});

Then you can get the position of the guide element(s) using getBoundingClientRect.

[bigcatLiu]

e.guide.guideElements

hello, thanks for your reply! i'm try, but There is this mistake!

Uncaught TypeError: e.guide.guideElements.getBoundingClientRect is not a function

i dont know why?

[adhrinae]

@bigcatLiu

I left the comment about the e.guide.guideElements like below:

It's an object. the key is the index of the row, and the value is the guide element.

You're trying to call getBoundingClientRect to a completely different object. Take a look at the value of the e.guide.guideElements then you'll get the hint.

[MarGraz]

Is this also valid for the version 2.1.3? I want to open my own modal on the event creation, and perform other actions on delete and on update. Thank you

[rohit21755]

@adhrinae @bigcatLiu How can we bring pop-up form through any external button?