Create A Simple Event Calendar With JavaScript – Caleandar.js

Category: Date & Time , Javascript | September 11, 2019
Author:jujumuncher
Views Total:63,448 views
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.

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

You Might Be Interested In:


35 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
    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
  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
  8. 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
  9. max

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

    Reply
  10. 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
  11. 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
  12. Agnieszka Sikorska

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

    Reply
  13. Mathias Hartung

    Hi.

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

    begin week with Monday

    Reply

Leave a Reply