A Simple Event Calendar With JavaScript – Caleandar.js

Time & Clock
Demo    Download
Create A Simple Event Calendar With JavaScript – Caleandar
File Size: 4.37 KB
Views Total: 980 views
Last Update:August 03, 2021
Publish Date: July 11, 2016
Official Website: Go to website
License: MIT
Plugin Author: jackducasse

A free jQuery plugin with Caleandar.js is a simple event calendar with JavaScript creating a topic capable inline schedule on the website page that upholds custom functions characterized in the JavaScript. user can add with events in to the calendar add with functionality on click of the event.

Table of Contents

How to used :

1. 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>

2. Create an empty container to place the calendar.

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

3. 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'},
];

4. 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
};

Done

List Of Version :

Nola Arney

Nola Arney is a full stack web developer who has Author at jQuerypost. Her ambition for development is only matched by his desire to find the perfect meme for every occasion.