Переопределение html и css для изменения ячейки дня в календаре месяца с jquery fullcalendar

Я пытаюсь изменить jquery полную ячейку дня календаря.Переопределение html и css для изменения ячейки дня в календаре месяца с jquery fullcalendar

Вот fiddle

Я хочу, чтобы редактировать CSS и HTML в день ячейки месяца, чтобы показать что-то вроде этого, где это событие охватывает весь день клетки, предотвращая любое новое событие dayclick возникновения. Я хочу max 1 событие в день!

Я пытался использовать eventRender обратного вызова, чтобы установить некоторые HTML и CSS, но у меня не было никакой удачи, вот что я пытался.

$('#calendar').fullCalendar({ 
 
       //defaultDate: '2016-12-17', 
 
       //defaultView: 'basicWeek', 
 
       //height: 300, 
 
       //eventColor: 'green', 
 
       events: [ 
 
        { 
 
         title: 'event', 
 
         start: '2016-12-17T12:00:00', 
 
         duration: '60 min' 
 
         //rendering: 'background' 
 
        } 
 
       ], 
 
       eventRender: function (event, element) { 
 
        element.html(''); 
 
        var new_description = 
 
         + '<div style="text-align: center; height=100%; width=100%;">' 
 
         + moment(event.start._i).format("HH:mm") + '<br/>' 
 
         + event.duration + '<br/>' 
 
         + event.title 
 
         + '</div>' 
 
         ; 
 
        element.append(new_description); 
 
       } 
 
      });

А вот что выглядит. Вы заметите, что некоторые белое пространство на вершине, где пользователь может щелкнуть его и день будет запущено событие и текст не выровнен по центру

Быстрый вопрос - следует избегать fullcalendar и узнайте ответ js с плагином https://github.com/airbnb/react-dates ??? Похоже, я мог бы полностью контролировать html и css для каждой ячейки!

источник

2016-12-19 user1186050

Чтобы переопределить CSS свойства fullcalender, убедитесь, что ваш пользовательский CSS приходит после вашего заявления fullcalendar.css.

eventRender Использование обратного вызова, найти ниже, рабочий фрагмент, иллюстрирующий подход:

$(document).ready(function() { 
 

 
    $('#calendar').fullCalendar({ 
 
     header: { 
 
      left: 'prev,next today', 
 
      center: 'title', 
 
      right: 'month,agendaWeek,agendaDay' 
 
     }, 
 
     defaultView: 'month', 
 
     eventRender: function (event, element) { 
 
      element.html(''); 
 
      element.append(
 
       moment(event.start._i).format("h:mm a") + '<br/>' 
 
       + event.duration + '<br/>' 
 
       + event.title 
 
      ); 
 
      var eventDay = $(".fc-day"); 
 

 
      $.each(eventDay, function(key, value) { 
 
       if (value.dataset["date"] == moment(event.start._i).format("YYYY-MM-DD")) { 
 
        value.style.backgroundColor = "red"; 
 
       } 
 
      }); 
 
     }, 
 
     events: [ 
 
      { 
 
       title: 'Event Name', 
 
       start: '2016-12-19T14:00:00', 
 
       duration: '60 min', 
 
       color: 'transparent' 
 
      } 
 
     ], 
 
     dayClick: function() { 
 
      return null; 
 
     } 
 
    }); 
 

 
});

<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.css' /> 
 
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script> 
 
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> 
 

 
<style type='text/css'> 
 
    .fc-event-container { 
 
     position: relative; 
 
     z-index: -1; 
 
     text-align: center; 
 
    } 
 
    .fc-event { 
 
     border-radius: 0; 
 
    } 
 
    .fc-day-grid-event { 
 
     margin: 0; 
 
    } 
 
</style> 
 

 
<div id='calendar'></div>

Обратите внимание: version 3.1.0 из fullcalendar был использован для целей этой иллюстрации; Я понял, что вы использовали довольно старый (версия 1.5.3), и не возражаете обновить его.

Аналогично добавлено moment.js, если необходимо эффективно обрабатывать даты.

Подробнее о Moment Parsing (String Format) here.

источник

2016-12-22 13:11:01 nyedidikeke

У меня проблема с этим ответом. Когда я нажимаю на событие в ячейке дня, он вызывает dayClick, а не eventClick. – user1186050

Я ищу полную противоположность этому. Я хочу, чтобы событие включалось в любую ячейку, где есть событие. Следовательно, событие охватывает всю ширину и высоту ячейки дня. – user1186050

@ user1186050: только что обновили мое сообщение, чтобы предотвратить события событий дня, как вы сказали. – nyedidikeke

Вы можете изменить JQuery следующим

$(document).ready(function() { 
    var calendar = $('#calendar').fullCalendar({ 
     defaultView: 'month', 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     eventRender: function(event, element, view) { 
      var new_description = 
       '<div style="text-align:center">3PM' + '<br/>' + 
       '60min' + '<br/>' + 
       'title</div>' 
      ; 
      element.append(new_description); 
     }, 

     events: [{ 
      title: 'event', 
      start: '2016-12-17T12:00:00', 
      duration: '60 min' 
       //rendering: 'background' 
     }] 

    }); 

    // console.log($('#calendar').html()); 

    // button click 
});

источник

2016-12-26 12:48:38

Вы можете достичь того же, если календарь клетка цвет фона точно так же, как события на этой ячейке, а также вы можете ограничить, чтобы добавить событие в календарь, если уже одно событие для этой ячейки календаря находится. Ниже приведен пример примера для его достижения.

 var h = {}; 

     if ($('#calendar').width() <= 400) { 
      $('#calendar').addClass("mobile"); 
      h = { 
       left: 'title, prev, next', 
       center: '', 
       right: 'today,month,agendaWeek,agendaDay' 
      }; 
     } else { 
      $('#calendar').removeClass("mobile"); 
      if (App.isRTL()) { 
       h = { 
        right: 'title', 
        center: '', 
        left: 'prev,next,month' 
       }; 
      } else { 
       h = { 
        left: 'title', 
        center: '', 
        right: 'prev,next,month' 
       }; 
      } 
     } 

var events = [ 
       { 
        title: 'event1', 
        start: '2016-12-17T12:00:00', 
        duration: '60 min', 
        backgroundColor: '#BFCAD1' 
       }, 
       { 
        title: 'event2', 
        start: '2016-12-24T12:00:00', 
        duration: '30 min', 
        backgroundColor: '#BFCAD1' 
       } 
      ] 

function handleCalendarDateClicked() { 
    var tempEvent = {};      
    tempEvent.title = "event3"; 
    tempEvent.start = '2016-12-31T12:00:00'; 
    tempEvent.duration = '30 min'; 
    tempEvent.backgroundColor = '#BFCAD1'; 
    events.push(tempEvent); 
    $('#calendar').fullCalendar('removeEvents'); //to avoid event duplicates 
    $('#calendar').fullCalendar('addEventSource', events); // to reinitialize calendar with updated events array 
} 

$('#calendar').fullCalendar({ 
       disableDragging: false, 
       header: h, 
       editable: false, 
       events: events, 
       eventRender: function (event, element) { 
        element.html(''); 
        var new_description = 
         + '<div style="text-align: center; height=100%; width=100%;">' 
         + moment(event.start._i).format("HH:mm") + '<br/>' 
         + event.duration + '<br/>' 
         + event.title 
         + '</div>' 
         ; 
        element.append(new_description); 
       }, 
       dayRender: function(date, cell) { 
        //based on condition like for the date event is there you can set background color of that cell 
        var cellDate = date.format('MMM DD, YYYY'); 
        if (dayRenderDates && dayRenderDates.indexOf(cellDate) > -1) { 
         cell.css("background-color", "#BFCAD1"); 
        } 
       }, 
       dayClick: function(date, jsEvent, view) { 
        //here, you can add event based on some condition like you want if there is already an event attached to the cell then another cannot be added 
        var newDate = new Date(date.format()); 
        return ((dayRenderDates.indexOf(newDate) > -1) ? '' : handleCalendarDateClicked(date.format('YYYY-MM-DD'))); 
       } 
      });

dayRenderDates массив дат, для которых событие есть
handleCalendarDateClicked() функция называется добавить событие

источник

2016-12-28 19:02:41 Varsha

Это может быть Getto способом пытаясь сделать эту работу.

HTML-:

<div id="calendarContainer" style="border:solid 2px red;"> 
 
    <div id='calendar'></div> 
 
</div>

Tha JavaScript:

$(document).ready(function() { 
    var calendar = $('#calendar').fullCalendar({ 
    defaultView: 'month', 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay' 
    }, 
    eventRender: function(event, element, view) { 
     var eventHeight = ($("#calendarContainer").height()/6) - 20, 
     eventWidth = ($("#calendarContainer").width()/7) - 6; 
     var new_description = '<div style="text-align:center;position:absolute;top:-19px;left:-1px;background-color:#3366cc;height:' + eventHeight + 'px;width:' + eventWidth + 'px;border-radius:5px;padding-top:3px;padding-left:4px;"> <div>event <br> time <br> title</div> </div>'; 
     element.append(new_description); 
    }, 




    events: [{ 
     title: 'event', 
     start: '2016-12-17T12:00:00', 
     duration: '60 min' 
     //rendering: 'background' 
    }] 


    }); 

    // console.log($('#calendar').html()); 



});

источник

2016-12-28 22:20:51 Sajeeb

Переопределение html и css для изменения ячейки дня в календаре месяца с jquery fullcalendar

ответ

Смежные вопросы