在首次加载完整日历时突出显示一些自定义事件

Question

我在我的项目中使用 fullCalendar。我的问题是我想预先填充日历，我将这些设置用作

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

我要强调的日子是

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": []

我希望那些日子在第一页加载时预先突出显示。我不知道将为此使用哪个选项？任何帮助将不胜感激谢谢

Answer 1

你可以通过添加 dayrender 函数来做到这一点

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');
        }
      }

Answer 2

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

我是这样做的..如果有人有兴趣知道..

在首次加载完整日历时突出显示一些自定义事件

Highlight some custom events on first load Full Calendar

fullcalendar

fullcalendar-scheduler