2016-10-05 5 views
0

У меня есть календарь, который показывает разную информацию о представлении месяца и дневном просмотре. Я бы хотел, чтобы пользователь мог щелкнуть мышью в один день, а затем показать, что каждый день показывает специфику каждого события. Это то, что я сейчас имею ниже.FullCalendar Показать различную информацию о dayClick

$('#calendar').fullCalendar({ 
      // put your options and callbacks here 
      height: 750, 
      header: { 
       left: 'prev,next today ', 
       center: 'title', 
       right: 'month' 
      }, 
      dayClick: function(date, jsEvent, view) { 

      }, 
      displayEventTime: false, 
      events: function(start, end, timezone, callback) { 
       $.ajax({ 
        type: 'POST', 
        url: 'WebServices/CalendarAtAGlanceWebService.asmx/GetCalendarSessions', 
        data: JSON.stringify({ date: $('#calendar').fullCalendar('getDate') }), 
        async: true, 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function (doc) { 
         var events = []; 
         $(doc.d).each(function() { 
          events.push({ 
           title: $(this).attr('EventName'), 
           start: $(this).attr('StartDate'), // will be parsed 
           description: $(this).attr("EventDescription") 
          }); 
         }); 
         callback(events); 
        } 
       }); 
      }, 
      eventRender: function (event, element) { 
       element.find('.fc-title').append("<br/>" + event.description); 
      } 
     }); 

Full Calendar Это то, что изображение выглядит как на месяц зрения.

ответ

0

Сделайте свою функцию dayClick следующего:

dayClick: function(date, jsEvent, view) 
{ 
    $('#calendar').fullCalendar('gotoDate', date); 
    $('#calendar').fullCalendar('changeView', agendaDay); 
} 

Это изменит вид на день вида нажатую даты, когда пользователь нажимает на один день в месяце зрении. Тогда вам просто нужно изменить eventRender логик для отображения только описания, когда в день зрения:

eventRender: function (event, element) 
{ 
    if($('#calendar').fullCalendar('getView').name == "agendaDay") 
    { 
     element.find('.fc-title').append("<br/>" + event.description); 
    } 
} 

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

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