javascriptjqueryfullcalendarfullcalendar-schedulerfullcalendar-2

Multiple nowIndicators on fullCalendar


Since there is very little documentation of the nowIndicator ... is there a way of showing a similar element like the nowIndicator on the same page ?

For example... I want to show a green one starting at 01:00 and i want to show a blue one starting at 12:00


Solution

  • I'm not sure if this is the best solution, it's more like a hack. The idea is to change the background-color to today's row. So you select all the rows because the interval of time is 30 minutes, you'll get 96 elements. (48 per day) the first 24 you don't need it because its the day before. You'll need the 25-73 elements because is today rows.

    I wrote this function, that will be called on every dayRender.

    function colorToday() {
      var color = '#EEEEEE';
      var fullArray = $('.fc-slats tr .fc-widget-content:nth-child(2)');
      var todayArray = fullArray.slice(24, 72);
    
      for(var i = 0; i < todayArray.length; i++) {
        var data = $(todayArray[i]);
        $(data).css('background', color);
      }
    }
    

    And add this to the options:

    dayRender: function (element) {
       colorToday();
    }
    

    This is a JSFIDDLE Like I said, I'm not sure if this is the best solution, but it does the work. Hope will help you.