Create A Simple Event Calendar With JavaScript – Caleandar.js

Category: Date & Time , Javascript | September 11, 2019
Author: jujumuncher
Views Total: 14,092
Official Page: Go to website
Last Update: September 11, 2019
License: MIT

Preview:

Create A Simple Event Calendar With JavaScript – Caleandar.js

Description:

Caleandar.js is a simple JavaScript library used for generating a themeable inline calendar on the webpage that supports custom events defined in the JavaScript.

How to use it:

Load the Caleandar.js and a theme CSS of your choice in the webpage.

<link rel="stylesheet" href="css/theme1.css">
<link rel="stylesheet" href="css/theme2.css">
<link rel="stylesheet" href="css/theme3.css">
<script src="js/caleandar.js"></script>

Create an empty container to place the calendar.

<div id="caleandar">
</div>

Add custom events into the calendar. Note that the month starts counting at zero because of the JavaScript’s Date’s API: 2019, 9, 7 – > Oct 7, 2019.

var events = [
    {'Date': new Date(2016, 6, 7), 'Title': 'Doctor appointment at 3:25pm.'},
    {'Date': new Date(2016, 6, 18), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
    {'Date': new Date(2016, 6, 27), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
];

Pass the following options to the calendar.

var settings = {
    Color: '',
    LinkColor: '',
    NavShow: true,
    NavVertical: false,
    NavLocation: '',
    DateTimeShow: true,
    DateTimeFormat: 'mmm, yyyy',
    DatetimeLocation: '',
    EventClick: '',
    EventTargetWholeDay: false,
    DisabledDays: [],
    ModelChange: model
};

Generate an event calendar inside the container you created.

var element = document.getElementById('caleandar');
caleandar(element, events, settings);

More previews:

Caleandar.js Theme 1

You Might Be Interested In:


20 thoughts on “Create A Simple Event Calendar With JavaScript – Caleandar.js

    1. stainii

      The example is incorrect. Replace “Title 1”, “Title 2” and “Title 3” with “Title”, and it works.

      Reply
  1. Musab Akram

    does anyone know how to get the date of the event clicked by user?

    Reply
    1. Aryan

      in claender.js change “EventTargetWholeDay: false,” to ‘true’ to be able to click on dates instead of just clicking on the titles.

      Reply
  2. bincymb

    Its showing current month’s event in coming month.

    eg : for October events listed in November

    Reply
    1. stainii

      That’s due to standard Javascript. The constructor of Date accepts month as a second parameter, but zero-based: January is 0, Februari 1, …

      Reply
  3. topher

    If i change the event date within the demo.js to a different date it is no longer shown on the calendar…. why?

    Reply
  4. mywebhostel

    I want to display the hole year calendar, can someone help me with that? Thanks!

    Reply
  5. [email protected]

    Hi, i incorporated you file into a wood working app i was building for school and it awesome! thank you for producing multiple css themes, really helped me out on my timeline!

    Reply
  6. Anmol

    Events Which are written in demo.js are not showing on calendar please provide solution

    Reply
    1. magicblue

      the calender was created in 2016, the demo dates are on the calender. just in 2016, not 2019.

      Reply
  7. Don Cotton

    Great code but is there a way to put images in the date, like a birthday cake to represent a birthday?

    Reply

Leave a Reply