Calendar monthly show date Range Start - End only

[okkypt]

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

[dongsik-yoo]

@okkypt I think you can achieve your goal with using proper functions. These might be helpful.

• getDateRangeStart
• getDateRangeEnd
• getDate

And you can disable create events, see this

Thank you.

[okkypt]

sorry im not so pro, if i choose august 12th, thw calendar will show september. how to focus in august ? sorry for too much question

[dongsik-yoo]

@okkypt Is there any source code using tui-calendar API or screen shot?

[okkypt]

hi @dongsik-yoo ,
here is my code..

var calendar = new Calendar('#calendar',{
        defaultView: 'month',
        taskView: true,
        template: {
            monthGridHeader: function(model) {

              var date = new Date(model.date);
              /*var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';*/
              if(date>new Date('2018-08-28')){
                var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';
            } else {
            }
            return template;
        },
    },

});



    calendar.createSchedules([
    {
        id: '1',
        calendarId: '1',
        title: '*',
        category: 'allday',
        dueDateClass: '',
        start: '2018-08-26',
        end:'2018-08-26',
        bgColor:'red',
        color:'white',
        isReadOnly:true,
    },
    {
        id: '2',
        calendarId: '1',
        title: 'second',
        category: 'time',
        dueDateClass: '',
        start: '2018-09-18T17:30:00+09:00',
        end: '2018-09-19T17:31:00+09:00',
        isReadOnly: true    // schedule is read-only
    }
    ]);

this will use for absence for my salesman. if that salesman not working for september 5th, so that salesman's name will show in that date with red color. and i can choose date from start - end..
ex : if i choose august 10 for start, when i see the august calendar, and then i click previous month (july) the js will show alert and the calendar still in august.

[dongsik-yoo]

@okkypt I think you don't call calendar.prev() and calendar.next() if you don't want move to other month.

[okkypt]

i have button for calendar.prev() and calendar.next() in my js.

[dongsik-yoo]

@okkypt Yes exactly what I said. You will have buttons to move to the other month. When buttons are clicked, you check current date and don't call prev() and next(). That's it.

Actually, I know your goal, but don't understand what is your detail requests like api guide, document guide, etc. As I said, if you don't want to move to the other month, you don't have to call prev() and next().

Thanks.

[okkypt]

i got it for the next and prev month. let me try tommrrow..

what is api guide and document guide ? if i want to show the name of my salesman if they dont work, am i must use schedule too? it must give start and end timee..

[dongsik-yoo]

@okkypt What I understand is you want to focus on specific months and don't want move to other month. It's difficult to know your service to me.

[okkypt]

ok, i will be back tommorrow when im in front of my PC, and i will give my code bro. sorry for ask too much broo..
but for next and previous month, i already know what must i do from your advice bro, Thankyou!

[dongsik-yoo]

@okkypt OK, thanks.

[okkypt]

hi @dongsik-yoo,
i want to show the name of my sales if they absence.. am i must use like this ?

calendar.createSchedules([
    {
        id: '1',
        calendarId: '1',
        title: '*',
        category: 'allday',
        dueDateClass: '',
        start: '2018-08-26',
        end:'2018-08-26',
        bgColor:'red',
        color:'white',
        isReadOnly:true,
    },

i dont want to use start end, is there any solution ? thankyou

[dongsik-yoo]

Yes . There is no way to show absence.

[okkypt]

oh okay bro, Thankyou for your kindness :)
i will make new issue if there is a problem. you can close this issue bro. Thankyou Very Much, btw awesome calendar!

[dongsik-yoo]

@okkypt Thank you for your attention. 👍