我怎麼只能設置事件的數量在一天面積

我真的初學者使用FullCalendar.js我怎麼只能設置事件的數量在一天面積

我要讓日曆設置只有像下面的圖像的事件數的一天。

我使用了eventLimit選項。但是0值並沒有超出我的預期。

即使我將eventLimit設置爲1，無論我做什麼，都會顯示事件名稱。

我怎麼不能設置天數區域的事件數？

https://fullcalendar.io/docs/display/eventLimit/

<!DOCTYPE html> 
<html lang="kr"> 
<head> 
<meta charset="UTF-8"> 
<title>calendar</title> 
<link rel='stylesheet' href='./js/jquery/fullcalendar.css' /> 
<style> 
    .fc-sat { 
     background-color: blue; 
    } 

    .fc-sun { 
     background-color: red; 
    } 
</style> 

<script src="./js/jquery/jquery-3.2.1.min.js"></script> 
<script src='./js/jquery/moment.min.js'></script> 
<script src='./js/jquery/fullcalendar.js'></script> 
<script src='./js/jquery/ko.js'></script> 
<script> 
    $(document).ready(function() { 

     // page is now ready, initialize the calendar... 

     $('#calendar').fullCalendar({ 
      // put your options and callbacks here 
      locale: 'ko', 
      header : { 
       left: '', 
       center: 'prev title next', 
       right: 'today' 
      }, 
      eventLimit: 1, // for all non-agenda views 
      eventLimitText: "더보기", 
      theme: false, // using jquery-ui theme, default: false 
      events: [{ 
       title: 'All Day Event', 
       start: '2017-08-01' 
      }, { 
       title: 'Long Event', 
       start: '2017-08-07', 
       end: '2017-08-10' 
      }, { 
       // id: 999, 
       title: 'Repeating Event', 
       start: '2017-08-09T16:00:00' 
      }, { 
       // id: 999, 
       title: 'Repeating Event', 
       start: '2017-08-16' 
      }, { 
       title: 'Meeting', 
       start: '2017-08-12T10:30:00', 
       end: '2017-08-12T12:30:00' 
      }, { 
       title: 'Lunch', 
       start: '2017-08-12T12:00:00' 
      }, { 
       title: 'Birthday Party', 
       start: '2017-08-13T07:00:00' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }, { 
       title: 'Click for Google', 
       url: 'http://google.com/', 
       start: '2017-08-28' 
      }] 
     }) 

    }); 
</script> 
</head> 
    <body> 
     <div id="content" style="width : 900px;"> 
      <div id="calendar" /> 
     </div> 
    </body> 
</html>

來源

2017-08-30 yhlee

你不能，很遺憾。目前的API不支持它。可以說'eventLimit：0'應該可以做你期望的事情。可能代碼將其評估爲false-y（您可以檢查源代碼，看它是否使用==或===進行測試。如果您計算出如何修復它，可以向維護人員提交補丁。我可以提出一個bug（我相信這兩個都在Github上完成）。 – ADyson

可以使用eventRender和eventAfterAllRender回調做到這一點。

Working JSFiddle。

爲了演示目的，我只對顯示計數做了非常基本的樣式，您可能會想做更多。

某處在你的JavaScript函數添加標記您的活動，所以我們可以找到它們：

function flagEvent(event, element) { 
    element.addClass('event-on-' + event.start.format('YYYY-MM-DD')) 
      .css('display', 'none'); 
}

接着，下面的2個回調添加到您的Fullcalendar初始化代碼：

eventRender: function(event, element) { 
    // When rendering each event, add a class to it, so you can find it later. 
    // Also add css to hide it so it is not displayed. 
    // Note I used a class, so it is visible in source and easy to work with, but 
    // you can use data attributes instead if you want. 

    flagEvent(event, element); 

    if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) { 
     while (event.end > event.start) { 
      event.start.add(1, 'day'); 
      console.log('flag', event.start.format('YYYY-MM-DD')) 
      flagEvent(event, element); 
     } 
    } 
}, 
eventAfterAllRender: function (view) { 
    // After all events have been rendered, we can now use the identifying CSS 
    // classes we added to each one to count the total number on each day. 
    // Then we can display that count. 
    // Iterate over each displayed day, and get its data-date attribute 
    // that Fullcalendar provides. Then use the CSS class we added to each event 
    // to count the number of events on that day. If there are some, add some 
    // html to the day cell to show the count. 

    $('#calendar .fc-day.fc-widget-content').each(function(i) { 
     var date = $(this).data('date'), 
      count = $('#calendar a.fc-event.event-on-' + date).length; 
     if (count > 0) { 
      $(this).html('<div class="fc-event-count">+' + count + '<div>'); 
     } 
    }); 
},

來源

2017-09-02 10:21:36

但是，它只標記開始日期，結束日期以及開始和結束日期之間沒有標記 – yhlee

@yhlee我看到 - 答案已更新以處理該問題。 –

@yhlee的jsfiddle更新太 –

我修正了這個代碼。因爲如果我下面添加值，此代碼不能正常工作

{ 
title: 'Dummy', 
url: 'http://google.com/', 
start: '2017-09-04', 
end: '2017-09-25' 
}

所以我喜歡這個，

<!DOCTYPE html> 
<html lang="kr"> 
<head> 
<meta charset="UTF-8"> 
<title>calendar</title> 
<link rel='stylesheet' href='./css/fullcalendar/fullcalendar.css' /> 
<style> 
    .fc-sat { 
     background-color: blue; 
    } 

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

    .fc-event-count { 
     color: green; 
     font-size: large; 
    } 
    .fc-event-container { 
     display : none; 
    } 
</style> 

<script src="./js/jquery/jquery-3.2.1.min.js"></script> 
<script src='./js/fullcalendar/moment.min.js'></script> 
<script src='./js/fullcalendar/fullcalendar.js'></script> 
<script src='./js/fullcalendar/ko.js'></script> 
<script> 
$(document).ready(function() { 

    // page is now ready, initialize the calendar... 

    function flagEvent(event, element) { 
    element.addClass('event-on-' + event.start.format('YYYY-MM-DD')) 
     .css('display', 'none'); 
    } 

    $('#calendar').fullCalendar({ 
    // put your options and callbacks here 
    header: { 
     left: '', 
     center: 'prev title next', 
     right: 'today' 
    }, 
    eventLimit: false, 
    eventRender: function(event, element) { 
     // When rendering each event, add a class to it, so you can find it later. 
     // Also add css to hide it so it is not displayed. 
     // Note I used a class, so it is visible in source and easy to work with, but 
     // you can use data attributes instead if you want. 
     console.log('flag', event.start.format('YYYY-MM-DD')) 


     console.log(event.start.format('YYYY-MM-DD')); 
     if (event.end) {console.log(event.end.format('YYYY-MM-DD'))}; 

     if (event.end && event.start.format('YYYY-MM-DD') !== event.end.format('YYYY-MM-DD')) { 
     while (event.end >= event.start) { 
      console.log('flag', event.start.format('YYYY-MM-DD')) 

      flagEvent(event, element); 
      event.start.add(1, 'day'); 
     } 
     } else { 
      flagEvent(event, element); 
     } 
    }, 
    eventAfterAllRender: function(view) { 
     // After all events have been rendered, we can now use the identifying CSS 
     // classes we added to each one to count the total number on each day. 
     // Then we can display that count. 
     // Iterate over each displayed day, and get its data-date attribute 
     // that Fullcalendar provides. Then use the CSS class we added to each event 
     // to count the number of events on that day. If there are some, add some 
     // html to the day cell to show the count. 

     $('#calendar .fc-day.fc-widget-content').each(function(i) { 
     var date = $(this).data('date'); 
     var count = $('#calendar a.fc-event.event-on-' + date).length; 

     if (count > 0) { 
      $(this).html('<div class="fc-event-count">+' + count + '<div>'); 
     } 
     }); 
    }, 
    events: [ { 
     title: 'Click for Google', 
     url: 'http://google.com/', 
     start: '2017-09-01' 
    }, { 
     title: 'Click for Google', 
     url: 'http://google.com/', 
     start: '2017-09-19' 
    }, { 
     title: 'Dummy', 
     url: 'http://google.com/', 
     start: '2017-09-04', 
     end: '2017-09-15' 
    },{ 
     title: 'Dummy', 
     url: 'http://google.com/', 
     start: '2017-09-08', 
     end: '2017-09-09' 
    }] 
    }) 
}); 
</script> 
</head> 
<body> 
<div id="content" style="width : 900px;"> 


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

來源

2017-09-05 09:16:24 yhlee

和，這個代碼在當地很好用，但在小提琴中工作不正常我不知道爲什麼 – yhlee

我怎麼只能設置事件的數量在一天面積

回答

相關問題