Question

我是初学者并使用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>

Answer 1

您可以使用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>');
        }
    });
},

Answer 2

我修改了这个代码。因为如果我添加以下值，则此代码无法正常工作

{
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>

如何仅设置日期区域中的事件数

2 个答案: