Create A Simple Event Calendar With JavaScript – Caleandar.js

Category: Date & Time , Javascript | September 11, 2019
35 Comments
Authorjujumuncher
Last UpdateSeptember 11, 2019
LicenseMIT
Tags
,
Views125,193 views
OfficialGo to website
Live DemoDownload
Create A Simple Event Calendar With JavaScript – Caleandar.js

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.

See Also:

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

See Also:

You Might Be Interested In:

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

    2. stainii

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

      Reply ↓
  2. 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 ↓
  3. 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 ↓
  4. 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 ↓
  5. mywebhostel

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

    Reply ↓
  6. [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 ↓
    1. Alex

      Go to calendar.js and change the following lines as showed below (only substract 1 for each line):
      this.Selected.FirstDay = new Date(this.Selected.Year, (this.Selected.Month), 1).getDay() – 1;
      this.Selected.LastDay = new Date(this.Selected.Year, (this.Selected.Month + 1), 0).getDay() – 1;

      Reply ↓
  11. 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 ↓
  14. Don Cotton

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

    Reply ↓
  17. William J Harris

    I’m trying to use this but I can’t get it to work on my site. I’m using .net, and whenever I try to use this, I get an error saying that it cannot read className of null on the last line of code in demo.js. I don’t know what else I am supposed to do to get this to work.

    Reply ↓
  19. max

    Great code! Thanks! How to click on a date to immediately click on the link to the event? Help me, please!

    Reply ↓
  20. Thu

    I would like to add one new button to go “Today Date”. That is why, how should I do to go Today calendar page when click on that button. Thanks in advance.

    Reply ↓
  22. Bagirathi Munusamy

    Great code, thanks! How to write a code getting information eg. Start Date, End Date from spreadsheet with attachment when creating an event?

    Reply ↓
  25. Agnieszka Sikorska

    How to disable links in events? I want the text itself.

    Reply ↓
  26. Mathias Hartung

    Hi.

    I am not a javascript guru.
    can anyone help me:

    begin week with Monday

    Reply ↓

Leave a Reply