0

I use fullcalendar from http://fullcalendar.io/ . I need to get the number of free time slot when view type is month.

Task: month view. If day has free time slot (without events) day must be green color and user can click on this day. If day is full then color is red and user cannot click.

I have no idea how i can do this and I will be glad if anyone help me.

function eventAfterAllRenderFunction(view) {
    if (view.name == "month") {
        var arrDate = [];
        $('#calendar').fullCalendar('clientEvents', function (eventObj) {
            arrDate[arrDate.length] = moment(eventObj.start).format('YYYY-MM-DD');
        });
        //console.log(arrDate);
        var i = 0;
        var count = 20;
        while (i < arrDate.length - 1) {
            if (arrDate[i] == arrDate[i + 1]) {
                count--;
                if (count == 0)
                    $("td[data-date=" + arrDate[i] + "]").css('background-color', '#FA8072'); //red                                      
            }
            else {
                count = 20;                   
            }
            i++;
        }
    }
}
HaveNoDisplayName
  • 8,291
  • 106
  • 37
  • 47
Софья Ахцхецян
  • 11
  • 2
  • Well, you fill the calendar events with a json, don't you? So you can analyse that json, make a loop or something, to count the number of days with events and detect the days without events. I would start there, make some attempts, and come back with some code to show :) – Jeremy Thille May 07 '15 at 06:52
  • @JeremyThille I count the number of events in the same day , and if it exceeds a certain number, the day stained red. Now that number is dynamic, and the event is not always occupies only one slot . This decision ceased to be a worker. – Софья Ахцхецян May 07 '15 at 07:22
  • Unfortunately, it's very hard to help you, just by imagining what you're doing. StackOverflow expects askers to post their code, and if possible a JSfiddle example, so we have something to work with. – Jeremy Thille May 07 '15 at 07:25
  • @JeremyThille function eventAfterAllRenderFunctionn(view) { if (view.name == "month") { var arrDate = []; $('#calendar').fullCalendar('clientEvents', function (eventObj) { arrDate[arrDate.length] = moment(eventObj.start).format('YYYY-MM-DD'); });var i = 0; var count = 20;while (i < arrDate.length - 1) { if (arrDate[i] == arrDate[i + 1]) { count--; if (count == 0) $("td[data-date=" + arrDate[i] + "]").css('background-color', '#FA8072'); } else { count = 20; } i++; } }} – Софья Ахцхецян May 07 '15 at 07:28
  • Naaah, edit your original post :) – Jeremy Thille May 07 '15 at 07:40
  • Sorry ) It is my first post here :))) How do I get an array of free time slots ? That is the problem . The rest I can myself think out. – Софья Ахцхецян May 07 '15 at 07:42
  • Ah, by looking around, I found those posts that may get your interest : [Highlight a day that has an event](http://stackoverflow.com/questions/20728054/how-to-highlight-a-day-which-has-an-event-in-fullcalendar-js) and [change the color of specific days](http://stackoverflow.com/questions/17613582/fullcalendar-change-the-color-for-specific-days) – Jeremy Thille May 07 '15 at 07:52
  • @JeremyThille I saw that, thank you... – Софья Ахцхецян May 07 '15 at 07:58

1 Answers1

0

I think I found a solution.

First, set all the days in green, using eventBackgroundColor.

Then, in your event data, specify another color for the days with events :

 events: [
        {
            'title'  : 'event1',
            'start'  : '2015-05-07'
            'backgroundColor' : 'red'
        },
        {
            'title'  : 'event2',
            'start'  : '2015-05-08',
            'end'    : '2015-05-09',
            'backgroundColor' : 'red'
        }
    ]

The per-day color will overwrite the green color.

About selection/unselection, just do the same using the selectable property.

Jeremy Thille
  • 26,047
  • 12
  • 43
  • 63