Highlight some custom events on first load Full Calendar

Question

I am using fullCalendar in my project. My issue is I want to prepopulte the calendar, I am using these settings as

initScheduleCalendar = ->
  scheduleCalendar = $('#cloud-recording-calendar').fullCalendar
    axisFormat: 'HH'
    allDaySlot: false
    columnFormat: 'ddd'
    defaultDate: '1970-01-01'
    slotDuration: '00:60:00'
    defaultView: 'agendaWeek'
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
    eventColor: '#428bca'
    editable: true

and the days I want to highlight are

fullWeekSchedule =
  "Monday": ["08:00-17:30"]
  "Tuesday": ["08:00-17:30"]
  "Wednesday": ["08:00-17:30"]
  "Thursday": ["08:00-17:30"]
  "Friday": ["08:00-17:30"]
  "Saturday": []
  "Sunday": []

I want those days pre highlighted on first page load. I dont know whic option is going to be used for this? any help will be appreciated thanks

score 0 · Answer 1 · answered Dec 05 '16 at 16:02

0

you can do this by add dayrender function

dayRender: function(daysOfWeek, cell) {
        console.log(daysOfWeek._d.toISOString().slice(0,10))
        if (daysOfWeek._d.toISOString().slice(0,10).toString() === '2016-11-24') {
          $(cell).addClass('fc-state-highlight');
        }
      }

answered Dec 05 '16 at 16:02

Bassem Salama

467
5
15

can you explain little bit more? – Junaid Farooq Dec 06 '16 at 04:54
add day render function to your full calendar and day render have two parameters first one the day that will be rendered and the second reference to the cell that contain that day then if the day equals to some date add highlight class to the cell. – Bassem Salama Dec 06 '16 at 06:38

score 0 · Accepted Answer · answered Dec 06 '16 at 05:26

renderEvents = ->
  schedule = fullWeekSchedule
  days = _.keys(schedule)
  calendarWeek = currentCalendarWeek()

  _.forEach days, (weekDay) ->
    day = schedule[weekDay]
    unless day.length == 0
      _.forEach day, (event) ->
        start = event.split("-")[0]
        end = event.split("-")[1]
        event =
          start: moment("#{calendarWeek[weekDay]} #{start}", "YYYY-MM-DD HH:mm")
          end: moment("#{calendarWeek[weekDay]} #{end}", "YYYY-MM-DD HH:mm")
        scheduleCalendar.fullCalendar('renderEvent', event, true)

currentCalendarWeek = ->
  calendarWeek = {}
  weekStart = scheduleCalendar.fullCalendar('getView').start
  weekEnd = scheduleCalendar.fullCalendar('getView').end
  day = weekStart
  while day.isBefore(weekEnd)
    weekDay = day.format("dddd")
    calendarWeek[weekDay] = day.format('YYYY-MM-DD')
    day.add 1, 'days'
  calendarWeek

I did this way.. if anyone interested to know..

Highlight some custom events on first load Full Calendar

2 Answers2