All in one calendar javascript

10 Best JavaScript Calendar Plugins For Scheduled Events (2023 Update)

An event calendar allows you to easily manage and share single/recurring events on a weekly, monthly, or yearly calendar interface.

Calendar plugins are really helpful in organizing events when you have a lot of them. While it may be tempting to select the first calendar plugin you find and play with, this should not be the case. The reason is that each plugin has different capabilities, as well as some limitations.

This is a list of 10 best, carefully selected jQuery and PURE JavaScript calendar plugins for organizing and showing events.

These 10 calendar plugins run the gamut from simple to complex but they are all capable of creating a great calendar widget. I chose them because they were easy to use, looked good and were highly configurable.

Originally Published May 14 2019, updated Jan 26 2023

Table of contents:

jQuery Calendar Plugins:

jQuery Calendar Plugin Using HTML Templates — CLNDR.js

A jQuery plugin that allows you to create a pretty clean calendar with event support using HTML template.

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap — Zabuto Calendar

A jQuery calendar plugin working with twitter’s bootstrap that allows you to create a monthly calendar with ajax data events support on your web page.

jQuery Ajax-enabled Month Calendar Plugin with Bootstrap — Zabuto Calendar

A jQuery plugin that provides responsive and easy-to-customize event calendar and date picker for your web application. The events can be stored in a XML file and support for highlighting event days when mouse hover.

Flexible Event Calendar In jQuery — evo-calendar

evo-calendar is a flexible event calendar plugin to display events in a responsive, modern-looking calendar interface.

Mobile-friendly Calendar and Schedule Plugin — jQuery Calendar.js

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Vanilla JS Calendar Libraries:

Feature-rich And Draggable Event Calendar Plugin — FullCalendar

FullCalendar is a lightweight yet powerful and developer-friendly JavaScript library to create flexible, draggable event calendars on the modern web app.

Full-featured Calendar JavaScript Library – tui.calendar

tui.calendar is a powerful, full-featured calendar library used to showcase custom events, schedules, tasks in daily, weekly, and monthly views.

Customizable Event Calendar With Month/Year Selection – Color Calendar

A flexible, customizable, themeable event calendar & month/year picker component written in vanilla JavaScript.

Simple Multilingual Calendar Component With Vanilla JavaScript

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Feature-rich Event Calendar In JavaScript – Calendar.js

A powerful, responsive, dynamic, mobile-friendly calendar & scheduling tool for your business.

Conclusion:

In this post you’ve learned about 10 handpicked plugins for building modern and clean event calendars. These plugins are more than enough to start using in any web project, from a digital portfolio website to a corporate event booking system.

Of course, the best calendar plugin will also depend on your individual needs. If you’re looking for a simple, responsive calendar to embed in your website, then Simple Calendar is an excellent choice. If you’re looking for flexibility and advanced functionality, however, then FullCalendar might be better for you. Ultimately, it all depends on how much time and effort you want to invest in your calendar plugin—and the end result you desire.

Want more jQuery plugins or JavaScript libraries to create awesome event calendars on the web & mobile? Check out the jQuery Calendar and JavaScript Calendar sections.

More Resources:

Источник

Simple Javascript Calendar With Events (Free Code Download)

Welcome to a tutorial on how to create a simple pure Javascript Calendar. Are you looking to develop a calendar web app, without using any server-side scripts? Be it for a commercial project, school project, or just curiosity – You have come to the correct place. This guide will walk you through how to create a pure Javascript calendar, all made possible with local storage. Read on!

TABLE OF CONTENTS

HOW THE CALENDAR WORKS

All right, let us now get into a little more detail on how the calendar works. Not going to explain line-by-line, but here’s a quick walk-through.

PART 1) CALENDAR HTML

     CALENDAR EVENT Date Details 

1. The month and year selector.
2. Where we will display the calendar for the selected month and year.
3. A form to add/edit calendar events.

PART 2) CALENDAR INITIALIZE

var cal = < // (A) PROPERTIES // (A1) FLAGS & DATA sMon : false, // week start on monday data : null, // events for selected period sDay : 0, sMth : 0, sYear : 0, // selected day month year // (A2) MONTHS & DAY NAMES months : [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], days : ["Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat"], // (A3) HTML ELEMENTS hMth : null, hYear : null, // month/year selector hWrap : null, // calendar wrapper hFormWrap : null, hForm : null, // event form hfDate : null, hfTxt : null, hfDel : null, // form fields // (B) INIT CALENDAR init : () => < // (B1) GET HTML ELEMENTS cal.hMth = document.getElementById("calMonth"); cal.hYear = document.getElementById("calYear"); cal.hWrap = document.getElementById("calWrap"); cal.hFormWrap = document.getElementById("calForm"); cal.hForm = cal.hFormWrap.querySelector("form"); cal.hfDate = document.getElementById("evtDate"); cal.hfTxt = document.getElementById("evtTxt"); cal.hfDel = document.getElementById("evtDel"); // (B2) APPEND MONTHS/YEAR let now = new Date(), nowMth = now.getMonth(); cal.hYear.value = parseInt(now.getFullYear()); for (let i=0; ical.hMth.appendChild(opt); > // (B3) ATTACH CONTROLS cal.hMth.onchange = cal.draw; cal.hYear.onchange = cal.draw; document.getElementById("calBack").onclick = () => cal.pshift(); document.getElementById("calNext").onclick = () => cal.pshift(1); cal.hForm.onsubmit = cal.save; document.getElementById("evtClose").onclick = () => cal.hFormWrap.close(); cal.hfDel.onclick = cal.del; // (B4) START - DRAW CALENDAR if (cal.sMon) < cal.days.push(cal.days.shift()); >cal.draw(); >, // . >; window.onload = cal.init; 

• Get all the HTML elements.
• Set up the month/year selector.
• Attach the add/edit event form click and submit handlers.

PART 3) PERIOD “SHIFTER”

 // (C) SHIFT CURRENT PERIOD BY 1 MONTH pshift : forward => < cal.sMth = parseInt(cal.hMth.value); cal.sYear = parseInt(cal.hYear.value); if (forward) < cal.sMth++; >else < cal.sMth--; >if (cal.sMth > 11) < cal.sMth = 0; cal.sYear++; >if (cal.sMth < 0) < cal.sMth = 11; cal.sYear--; >cal.hMth.value = cal.sMth; cal.hYear.value = cal.sYear; cal.draw(); >,

Next, pshift() is a simple function to shift the current period forward/backward by one month.

PART 4) DRAW THE CALENDAR

// (D) DRAW CALENDAR FOR SELECTED MONTH draw : () => < // (D1) DAYS IN MONTH + START/END DAYS // note - jan is 0 & dec is 11 // note - sun is 0 & sat is 6 cal.sMth = parseInt(cal.hMth.value); // selected month cal.sYear = parseInt(cal.hYear.value); // selected year let daysInMth = new Date(cal.sYear, cal.sMth+1, 0).getDate(), // number of days in selected month startDay = new Date(cal.sYear, cal.sMth, 1).getDay(), // first day of the month endDay = new Date(cal.sYear, cal.sMth, daysInMth).getDay(), // last day of the month now = new Date(), // current date nowMth = now.getMonth(), // current month nowYear = parseInt(now.getFullYear()), // current year nowDay = cal.sMth==nowMth && cal.sYear==nowYear ? now.getDate() : null ; // (D2) LOAD DATA FROM LOCALSTORAGE cal.data = localStorage.getItem("cal-" + cal.sMth + "-" + cal.sYear); if (cal.data==null) < localStorage.setItem("cal-" + cal.sMth + "-" + cal.sYear, "<>"); cal.data = <>; > else < cal.data = JSON.parse(cal.data); >// (D3) DRAWING CALCULATIONS // (D3-1) BLANK SQUARES BEFORE START OF MONTH let squares = []; if (cal.sMon && startDay != 1) < let blanks = startDay==0 ? 7 : startDay ; for (let i=1; i> if (!cal.sMon && startDay != 0) < for (let i=0; i> // (D3-2) DAYS OF THE MONTH for (let i=1; i // (D3-3) BLANK SQUARES AFTER END OF MONTH if (cal.sMon && endDay != 0) < let blanks = endDay==6 ? 1 : 7-endDay; for (let i=0; i> if (!cal.sMon && endDay != 6) < let blanks = endDay==0 ? 6 : 6-endDay; for (let i=0; i> // (D4) "RESET" CALENDAR cal.hWrap.innerHTML = `
 `; // (D5) CALENDAR HEADER - DAY NAMES wrap = cal.hWrap.querySelector(".calHead"); for (let d of cal.days) < let cell = document.createElement("div"); cell.className = "calCell"; cell.innerHTML = d; wrap.appendChild(cell); >// (D6) CALENDAR BODY - INDIVIDUAL DAYS & EVENTS wrap = cal.hWrap.querySelector(".calBody"); row = cal.hWrap.querySelector(".calRow"); for (let i=0; i if (squares[i]=="b") < cell.classList.add("calBlank"); >else < cell.innerHTML = `
"; > cell.onclick = () => < cal.show(cell); >; > row.appendChild(cell); // (D6-2) NEXT ROW if (i!=(squares.length-1) && i!=0 && (i+1)%7==0) < row = document.createElement("div"); row.className = "calRow"; wrap.appendChild(row); >> >

cal.draw() draws the calendar for the currently selected month/year, and it is the most complicated function in this project. Long story short:

• (D1) A whole bunch of day/month/year calculations.
• (D2) The events data is kept in localStorage in a monthly manner ( cal-MONTH-YEAR = JSON ENCODED OBJECT ). Retrieve the events data for the selected month/year, and put it into cal.data .
• (D3) Do all the calculations in squares = [] first.
• (D4) “Reset” the current HTML calendar.
• (D5) Redraw the day names.
• (D6) Loop through squares to draw the HTML calendar.

PART 5) SHOW/EDIT CALENDAR EVENT

// (E) SHOW EDIT EVENT DOCKET FOR SELECTED DAY show : cell => < cal.hForm.reset(); cal.sDay = cell.querySelector(".cellDate").innerHTML; cal.hfDate.value = `$$ $`; if (cal.data[cal.sDay] !== undefined) < cal.hfTxt.value = cal.data[cal.sDay]; cal.hfDel.classList.remove("hide"); >else < cal.hfDel.classList.add("hide"); >cal.hFormWrap.show(); >

When the user clicks on a date cell, cal.show() will be called. Pretty self-explanatory – We fetch the event from cal.data , then show the add/edit event form.

PART 6) SAVE/DELETE EVENTS DATA

// (F) SAVE EVENT save : () => < cal.data[cal.sDay] = cal.hfTxt.value; localStorage.setItem(`cal-$-$`, JSON.stringify(cal.data)); cal.draw(); cal.hFormWrap.close(); return false; >, // (G) DELETE EVENT FOR SELECTED DATE del : () => < if (confirm("Delete event?")) < delete cal.data[cal.sDay]; localStorage.setItem(`cal-$-$`, JSON.stringify(cal.data)); cal.draw(); cal.hFormWrap.close(); >

Lastly, these are self-explanatory functions again. We simply update the events data in localStorage .

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

Finally, here are a few more extras that may be useful.

MULTIPLE EVENTS PER DAY?

Of course, we can. Let’s take a look at the current save() function:

cal.data[cal.sDay] = cal.hfTxt.value;

We are pretty much storing the event data in data[DAY] = EVENT now. So to allow multiple events on the same day, the general idea is to change the current structure into a multi-dimensional array data[DAY] = [EVENT, EVENT, EVENT] .

cal.data[cal.sDay] = []; cal.data[cal.sDay].push(document.getElementById("evt-details").value);

• Add more text field(s) in the HTML.
• save() to include the extra text field(s).
• list() to draw the extra data.
• show() to also populate the extra text field(s).

As you can guess, that will increase the complexity exponentially, turning this into a “not simple tutorial”. This is why I don’t answer the “support multiple events” and “span an event across multiple days” questions – Feel free to challenge yourself though, this simple calendar is a good starting point.

LIMITATIONS

• Only one event is allowed in a day.
• The events cannot span multiple days.
• The Javascript calendar requires the use of local storage. If it is disabled on the browser or not supported, then it will not be able to save the events at all.

But of course, I have released this as an open-source. So feel free to tweak it however you see fit or check out the calendar PWA in the links below for a “better calendar”.

LINKS & REFERENCES

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник