How can I set only the number of event in day area

后端 未结 2 1761
时光说笑
时光说笑 2020-12-20 05:11

I`m begginer and using FullCalendar.js

I want to make day of calendar set only the number of event like below image.

I used eventLimit option. But 0 value do

相关标签:
2条回答
  • 2020-12-20 05:42

    You can do this using the eventRender and eventAfterAllRender callbacks.

    Working JSFiddle.

    I've only done very basic styling of the displayed counts for demonstration purposes, you will probably want to do more.

    Somewhere in your Javascript add a function to tag your events so we can find them later:

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

    Then, add the following 2 callbacks to your Fullcalendar init code:

    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>');
            }
        });
    },
    
    0 讨论(0)
  • 2020-12-20 06:06

    I fixed this code a litte. because if I add below value, this code does not work properly

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

    so I do like this,

    <!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>
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题