2015-09-02 3 views
0

Я использую FullCalendar, и я не могу изменить фон событий выбранной даты. В другие дни, когда вы нажимаете, отмечены красным цветом, но события нет. Я думаю, что это с помощью CSS, но я не знаю, как его модифицировать, чтобы хорошо работать.Fullcalendar -> Изменить цвет выбранного события

Мой код: http://jsfiddle.net/y33wb52n/

Javascript

$(document).ready(function() { 
    var fecha_seleccionada; 
    var tempVar = ""; 

    $('#calendar').fullCalendar({ 
     lang: "es", 

     selectable: true, 
     select: function(a, b) { 
      fecha_seleccionada = a.format(); 
      //alert(fecha_seleccionada); 
      var input_fecha = document.getElementById("input_fecha"); 
      input_fecha.value = fecha_seleccionada; 
     }, 

     //defaultDate: '2015-02-12', 
     editable: false, 
     eventLimit: false, // allow "more" link when too many events 
     events: [ 
       { 
        title: 'Evento', 
        width: '0', 
        start: '2015-09-17' 
       }, 
       { 
        title: 'Evento', 
        width: '0', 
        start: '2015-09-19' 
       } 
     ], 


     dayClick: function(date, allDay, jsEvent, view) { 
      // change the day's background color just for fun 
      if (tempVar == "") 
      { 
       $(this).css('background-color', 'red'); 
       tempVar = this; 
      } 
      else 
      { 
       $(this).css('background-color', 'red'); 
       $(tempVar).css('background-color', '#f6f6f6'); 
       tempVar = this; 
      } 
     } 


    }); 
}); 

CSS

.fc-event-skin { 
margin: -20px auto 0px auto; /* spacing between events and edges */ 
padding: 30px 0px; 
border-radius: 0px !important; 

}

HTML

<div id='calendar' style='margin:3em 0;font-size:13px'></div> 

Любая помощь? Спасибо!

+0

Я не понимаю, что вы пытаясь сделать. Вы пытаетесь изменить цвет фона всех событий при загрузке или события при нажатии? – Brandon

+0

Я пытаюсь изменить фон дней, на которые я нажимаю. Но дни с событиями не отмечены красным. – wanheda

ответ

1

Я считаю, что это потому, что если вы нажмете событие, которое вы не нажимаете на день. У меня была игра с приведенным вами примером, и это правда, если вы нажмете на событие, это не изменит цвет, но вы можете на самом деле нажать на день за событие, которое меняет цвет.

http://i.stack.imgur.com/OKDiR.png

Итак, когда вы щелкаете событие, событие dayClick не стреляя, событие eventClick стреляет.

http://fullcalendar.io/docs/mouse/eventClick/

Не уверен, как вы должны получить на следующий день, что это за событие внутри этого обратного вызова, хотя.

0

Просто добавьте в ваш CSS:

.fc-highlight { 
    background-color:red; 
} 

Это работает, когда день щелкнул, так что вы должны иметь это в fullcalendar JQuery:

$(document).ready(function() { 
      $('#calendarID').fullCalendar({ 

      dayClick: function(date, jsEvent, view) { 
       // some code 
       $('#calendarID').fullCalendar('select', date); 

      }, 
... 
Смежные вопросы