Multiple nowIndicators on fullCalendar

Question

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

Nothing that's built-in AFAIK. You'd have to study the source code / CSS to see how the nowIndicator is created and adapt it to be able to put an indicator anywhere and specify that in the options. — ADyson, Feb 28 '18 at 14:31
Having said that, what are you actually going to use this for? i.e. what real-world thing does it represent to have 2 indicators? If you explain that, perhaps there is a different way to achieve the desired outcome. — ADyson, Feb 28 '18 at 14:32
I am showing 3 days vertically, using the code I showed here - https://stackoverflow.com/a/48864155/1850286. With this indicator I might be able to have a nowIndicator between days (at 00:00) . Otherwise I have no option of showing when a day starts and another day ends and highlight it in any way. Also, with 2 indicators I might show the daily start time of two individual persons . Person A starts work at 09:00 and person B starts work at 17:00. This should not affect in any way the events and so on. — Vlad N, Feb 28 '18 at 15:14
I did think when I saw your solution to that other question that it was a bit difficult to read in terms of knowing which day was which. But yeah you'll need some custom code to do this I think, unless you can perhaps make use of Background Events instead? — ADyson, Feb 28 '18 at 15:25
i don't know its related to your question or not. check [businessHour](https://fullcalendar.io/docs/businessHours) — Jainam Shah, Mar 06 '18 at 11:46
Unfortunately that is not necesarely what I need... I am working on a calendar that has 3 days one on top of another using the code from here: https://stackoverflow.com/questions/48259966/show-more-than-1-day-in-fullcalendar-day-view ... I need to setup a delimiter between days ( similar to the nowIndicator but at a specific time/day ) — Vlad N, Mar 06 '18 at 15:25

score 4 · Accepted Answer · edited Mar 09 '18 at 22:11

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.

Thank you ... I was hoping to find a solution to show the nowIndicator at a specific time/date but this works too for my issue. Did not occur to me to just paint the today slots a different color. — Vlad N, Mar 12 '18 at 14:01

Multiple nowIndicators on fullCalendar

1 Answers1