Author: | jujumuncher |
---|---|
Views Total: | 63,448 views |
Official Page: | Go to website |
Last Update: | September 11, 2019 |
License: | MIT |
Preview:

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:
Hi,
I’ve followed the steps but my events are coming up as ‘Undefined’ – any idea why?
https://uploads.disquscdn.com/images/6b47a681e73dbb00266b735601fc597dddb078b4498f7e0c04938c4d4f958b52.png
Thanks!
a simple JavaScript library used for generating a themeable inline calendar on the webpage that supports custom events defined in the JavaScript.
The example is incorrect. Replace “Title 1”, “Title 2” and “Title 3” with “Title”, and it works.
does anyone know how to get the date of the event clicked by user?
in claender.js change “EventTargetWholeDay: false,” to ‘true’ to be able to click on dates instead of just clicking on the titles.
Its showing current month’s event in coming month.
eg : for October events listed in November
That’s due to standard Javascript. The constructor of Date accepts month as a second parameter, but zero-based: January is 0, Februari 1, …
so what is the solution!
If i change the event date within the demo.js to a different date it is no longer shown on the calendar…. why?
It will display in the following month.
I want to display the hole year calendar, can someone help me with that? Thanks!
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!
Is this demo code compatible with Angular js?Plz reply soon
Hello, how to set Mondey as 1st day at calendar? 🙂
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;
how to give all sundays in red color
Can anyone tell that how can I add multiple events for the same date….
Just repeat the date.
Events Which are written in demo.js are not showing on calendar please provide solution
Events created on demo.js is not showing up in calendar please provide solution
the calender was created in 2016, the demo dates are on the calender. just in 2016, not 2019.
how to make time on the title in the calendar
Great code but is there a way to put images in the date, like a birthday cake to represent a birthday?
Great code! Thanks
Great code, thanks – helped a lot..
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.
Cant get to work in the first place?
Great code! Thanks! How to click on a date to immediately click on the link to the event? Help me, please!
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.
The calendar doesn’t display properly if two events are on the same day, or if there is an event on the current day.
Great code, thanks! How to write a code getting information eg. Start Date, End Date from spreadsheet with attachment when creating an event?
Thanks for sharing. Great code.
Amazing code. Stay updated!
How to disable links in events? I want the text itself.
Hi.
I am not a javascript guru.
can anyone help me:
begin week with Monday