Create A Simple Event Calendar With JavaScript – Caleandar.js

Category: Date & Time , Javascript | July 18, 2016
Author: jujumuncher
Views Total: 11,668
Official Page: Go to website
Last Update: July 18, 2016
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">
<script src="js/caleandar.js"></script>

Create an empty container to place the calendar.

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

Add custom events into the calendar.

var events = [
    {'Date': new Date(2016, 6, 7), 'Title 1': 'Doctor appointment at 3:25pm.'},
    {'Date': new Date(2016, 6, 18), 'Title 2': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
    {'Date': new Date(2016, 6, 27), 'Title 3': '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);

 

You Might Be Interested In:

12 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
  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

Leave a Reply