JavaScript FullCalendar

   blog 3 minutes read (About 498 words)  visits

Introduction

Sometimes, we would like to show a calendar in our web application. In this blog post, I would like to discuss how to integrate a JavaScript based calendar plugin FullCalendar into our website.

FullCalendar

FullCalendar is one of the most popular JavaScript calendar plugins available. It comes with a free version and a paid version. We would just use the free version for our website.

Example

The FullCalendar integrated into my website looks like this. It is not perfect, but it should be quite sufficient for multiple use cases.

Implementation

The implementation of a calendar using FullCalendar, extended from one of the official examples, can be as simple as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../lib/main.css' rel='stylesheet' />
<script src='../lib/main.js'></script>
<script>

function getDateToday()
{
    const today = new Date();
    const dd = String(today.getDate()).padStart(2, '0');
    const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
    const yyyy = today.getFullYear();

    return [mm, dd, yyyy];
}

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    const [mm, dd, yyyy] = getDateToday();

    var calendar = new FullCalendar.Calendar(calendarEl, {
        headerToolbar: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,dayGridDay'
        },
        initialDate: `${yyyy}-${mm}-12`,
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        dayMaxEvents: true, // allow "more" link when too many events
        events: [
            {
                title: 'All Day Event',
                start: `${yyyy}-${mm}-01`
            },
            {
                title: 'Long Event',
                start: `${yyyy}-${mm}-07`,
                end: `${yyyy}-${mm}-10`
            },
            {
                groupId: 999,
                title: 'Repeating Event',
                start: `${yyyy}-${mm}-09T16:00:00`
            },
            {
                groupId: 999,
                title: 'Repeating Event',
                start: `${yyyy}-${mm}-16T16:00:00`
            },
            {
                title: 'Conference',
                start: `${yyyy}-${mm}-11`,
                end: `${yyyy}-${mm}-13`
            },
            {
                title: 'Meeting',
                start: `${yyyy}-${mm}-12T10:30:00`,
                end: `${yyyy}-${mm}-12T12:30:00`
            },
            {
                title: 'Lunch',
                start: `${yyyy}-${mm}-12T12:00:00`
            },
            {
                title: 'Meeting',
                start: `${yyyy}-${mm}-12T14:30:00`
            },
            {
                title: 'Happy Hour',
                start: `${yyyy}-${mm}-12T17:30:00`
            },
            {
                title: 'Dinner',
                start: `${yyyy}-${mm}-12T20:00:00`
            },
            {
                title: 'Birthday Party',
                start: `${yyyy}-${mm}-13T07:00:00`
            },
            {
                title: 'Click for Google',
                url: 'https://google.com/',
                start: `${yyyy}-${mm}-28`
            }
        ],
        eventClick: function(event) {
            if (event.event.url) {
                event.jsEvent.preventDefault();
                window.open(event.event.url, "_blank");
            }
        }
    });

    calendar.render();
});

</script>
<style>

body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

#calendar {
    max-width: 1100px;
    margin: 0 auto;
}

</style>
</head>
<body>

<div id='calendar'></div>

</body>
</html>

However, when I tried to integrate it into my website, I found that because the FullCalendar heavily relies on the external CSS for formatting and there are lots of CSS overridden from my website, both the entire webpage and the calendar got screwed up.

Downloading the external CSS and modifying it requires reading and understanding the JavaScript source code, which is something I don’t have the bandwidth to do. So my ultimate strategy is to use the iframe tag for integration since the content from the iframe will not be affected the CSS of the target.

The integration code looks as follows.

1
2
3
<div style="overflow-x:auto;">
    <iframe src="/javascript/fullcalendar-5.11.3/examples/current-month-daygrid-views.html" style="width:955px; height:820px;", title="calendar"></iframe>
</div>

Because the responsive design of FullCalendar does not work well with small screens, I used fixed width and heigh and allowed overflow for the calendar.

References

JavaScript FullCalendar

https://leimao.github.io/blog/JavaScript-FullCalendar/

Author

Lei Mao

Posted on

09-24-2022

Updated on

09-24-2022

Licensed under

 

Like this article? Support the author with

Comments

  Follow   Sponsor

Catalogue

×