В полном календаре подсветка пользовательских дат - PullRequest
Новая
       10

В полном календаре подсветка пользовательских дат

0 голосов
/ 11 января 2019

Я хочу показать в календаре, что какие даты являются свободными датами в году. Для этого я хочу установить красный фон.

Моя проблема в том, что этот код дает красный фон всем датам.

Я использую это в событии dayRender. 

var unnep_napok = 
    [
        "2019-01-12",
        "2019-01-15"
    ];

$('#calendar').fullCalendar({
                events: valami,
                lang: 'hu',
                dayClick: function(event) {
                    $(cell).removeClass('ui-widget-content');
                    $(cell).addClass('holiday');
                    $(this).css('background-color', 'green');
                },
                defaultView: 'month',
                contentHeight: 'auto',
                slotEventOverlap: false,

                eventRender: function(eventObj, $el) {
                    $el.popover({
                          title: ' ',
                          content: eventObj.description,
                          trigger: 'hover',
                          placement: 'top',
                          container: 'body'
                    });
                },



                dayRender: function (date, cell) {
                    for(i = 0; i < unnep_napok.length; i++ )
                    {
                        cell.css("background-color", "red");
                    }
                }


            });

Обновление по сравнению: 

    dayRender: function (date, cell) {
                    for(i = 0; i < unnep_napok.length; i++ )
                    {
                        if(date == unnep_napok[i] )
                        {
                            cell.css("background-color", "red");
                        }
                    }
                }

Обновление 2, форматирование элементов массива: 

dayRender: function (date, cell) 

              {
                  for(i = 0; i < unnep_napok.length; i++ )
                  {
                      var datum = unnep_napok[i].moment.format('yyyy-mm-dd');

                      if(date.getDate() == datum )
                      {
                          cell.css("background-color", "red");
                      }
                  }
              }

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Действующий пример, основанный на ответе ADyson. Я также рассмотрел пример popover для быстрого старта.

.popover работает таким образом $ (element) .popover и не работает с использованием element.popover

Пример выполнения: https://jsfiddle.net/alifaraze/mr53d7nz/8/

HTML 

 <div id="calendar"></div>

Сценарий 

$(document).ready(function() {
  var unnep_napok = [
    "2019-01-23",
    "2019-01-25"
  ];
  $('#calendar').fullCalendar({
    events: [{
        id: 1,
        title: 'Full Day Event',
        start: '2019-01-02',
        end: '2019-01-03',
        description: 'A full day event description'
      },
      {
        id: 2,
        title: 'Whole Week Event',
        start: '2019-01-06',
        end: '2019-01-10',
        description: 'Whole week event description'
      }
      // more events here
    ],
    eventRender: function(event, element) {
      $(element).popover({
        title: function() {
          return "<B>" + event.title + "</B>";
        },
        placement: 'auto',
        html: true,
        trigger: 'click',
        animation: 'false',
        content: function() {
          return "<h4>"+ event.description+"</h4>"
        },
        container: 'body'
      });
    },
    dayRender: function(date, cell) {
      for (i = 0; i < unnep_napok.length; i++) {
        if (date.format('YYYY-MM-DD') == unnep_napok[i]) {
          cell.css("background-color", "red");
        }
      }
    }
  });
})
0 голосов
/ 15 января 2019

После вашего обновления все еще есть некоторые проблемы, которые можно решить, прочитав документацию (и мои предыдущие комментарии) более внимательно:

1) Я не дал вам буквальных значений для использования в команде "format". Вы полностью прочитали документацию ? Как видите, правильный формат будет YYYY-MM-DD (большие буквы, а не маленькие буквы).

2) unnep_napok[i].moment.format ... это не то, как вы создаете моментальный объект . Я ожидаю, что ваш браузер выдал ошибку в консоли по этому поводу.

3) Но в любом случае 2) на самом деле это не важно, потому что, как я уже упоминал в моем последнем комментарии, это значение date, которое нужно отформатировать ... ваши значения unsp_napok уже являются строками !!

4) date.getDate() .. Я не знаю, откуда ты это взял ?? MomentJS не документирует такую ​​функцию.

Это должно работать для вас: 

dayRender: function (date, cell) 
{
  for(i = 0; i < unnep_napok.length; i++ )
  {
    if(date.format('YYYY-MM-DD') == unnep_napok[i])
    {
      cell.css("background-color", "red");
    }
  }
}
...