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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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 doesn`t work than I expected.

Even if I set eventLimit to 1, this shows event name no matter what I do.

How cant I set only the number of event in day area?

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:17:15+0000

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>');
        }
    });
},

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags