jackducasse / caleandar

A lightweight, library independent JavaScript calendar

######v0.0.1 #Caleandar Let me keep the intro brief. It's a lightweight (about 7.5kb minified at the time of writing) and library-independent calendar script with optional themes. You can add events to the calendar and add functionality on click of the event. That's about the jist of it. Continue reading for instructions on how to use and examples.

###Installing Simply download the caleandar.js file and any of the css themes you'd like. Then include a reference to the file(s) in your html:

<script type="text/javascript" src="js/caleandar.min.js"></script>

plus any of the following optional css files

<link rel="stylesheet" href="css/theme1.css"/>
<link rel="stylesheet" href="css/theme2.css"/>
<link rel="stylesheet" href="css/theme3.css"/>

###Instantiating At it's simplest, call the calendar() function with the following 3 optional parametars:

caleandar(element, events, settings);

Where element is an HTML element, events is an array of event objects and settings is an object of settings. Pretty straightforward so far.

####Element A single HTML element. ######Examples: var element = caleandar(document.querySelector('#foo'));

var element = caleandar(document.getElementById('foo'));

var element = caleandar(document.getElementsByClassName('bar')[0]);

or if you are using jQuery: var element = caleandar($('#foo'));

####Events An array of event objects to be placed on their respective dates on the calendar. ######Examples: Using Simple links for events:

var events = [
  {'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.'},
  {'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
  {'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
];

Using anonymous functions to instantiate on click:

var events = [
  {'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.', 'Link': function(){console.log('Reminder!');}},
  {'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': function(){alert("Better not miss the movie!");}},
  {'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': function(){console.debug(document.getElementById('foo'));}},
];

####Settings Below are all the possible settings attributes with example values.

var settings={
    Color: '#999',                //(string - color) font color of whole calendar.
    LinkColor: '#333',            //(string - color) font color of event titles.
    NavShow: true,                //(bool) show navigation arrows.
    NavVertical: false,           //(bool) show previous and coming months.
    NavLocation: '#foo',          //(string - element) where to display navigation, if not in default position.
    DateTimeShow: true,           //(bool) show current date.
    DateTimeFormat: 'mmm, yyyy',  //(string - dateformat) format previously mentioned date is shown in.
    DatetimeLocation: '',         //(string - element) where to display previously mentioned date, if not in default position.
    EventClick: '',               //(function) a function that should instantiate on the click of any event. parameters passed in via data link attribute.
    EventTargetWholeDay: false,   //(bool) clicking on the whole date will trigger event action, as opposed to just clicking on the title.
    DisabledDays: [],             //(array of numbers) days of the week to be slightly transparent. ie: [1,6] to fade Sunday and Saturday.
    ModelChange: model            //(array of objects) new data object to pass into calendar (serving suggestion: passing through only the currently selected month's events if working with large dataset.
  }

###CSS Themes #####Theme 1

<link rel="stylesheet" href="css/theme1.css"/>

#####Theme 2

<link rel="stylesheet" href="css/theme2.css"/>

#####Theme 3

<link rel="stylesheet" href="css/theme3.css"/>

caleandar's Issues

Start Day in Germany is Monday

Hi,
can i start the Calendar with firstday = Monday?

Multiple Event Same Day

It seems that if I have 2 events in the same day, the second one override the first one...

SET FUTURE EVENTS

Hi,
Nice plugin, but please is there a way i can set the future events on the calendar?

I noticed when i pass them only events on the present month get attached to the calendar. when i navigate to the future event date they are not present on the calendar,thanks.

how to use eventclick

Could you please give an example to illustrate how to use bing eventclick. What i did here throw me an error, which is eventclick is not bind. PTAL, thx!

Events are not popping up on mobile devices.

Dates with hours and minutes do not displayed.

Hi, dates with times greater than 00-00 are not displayed.

onclick event to div for mobile using theme 2

My JS is very very rusty and I'm trying to get 'Title' from my events array to appear in a div below the caleander on my page for mobile users. Not sure how to accomplish this or if I have to use a different theme.

Events on same day are overlapping

The HTML elements are overlapping if I set two events on the same day.

Did someone have this issue before?

Don't pop up list for all events on same day; just use day as event handler?

Is it possible to not have a list of events pop up when you click on a day with a single event, but to instead, just capture the click for the day, and work from that click?

get Date

can you tell me how can i get the date which is clicked by user?

Show Future Month

Hello,
I want to ask that in any manner, Can we show the future month with events without navigating?
For reference, I'm attaching an image.

It will be a great help to me if you can suggest something regarding this.
Thanks

Hot reload calendar?

A second call to caleandar(element,events); in a vain attempt to reload the calendar produces no error but does nothing. This is a use-case where I can't reload the parent container.

Month starts counting at zero

When I enter an event date of 6 it displays in July.
Logically 6 should be June.
Looks like it is counting starting at 0 as a entry of 0 displays as January.

The day and year number display correctly.

Love it other than that.

Thanks
Tim

var events = [
{'Date': new Date(2016, 6, 1), 'Title': 'Doctor appointment at 3:25pm.'},
{'Date': new Date(2016, 6, 7), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
{'Date': new Date(2016, 6, 11), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
];

How to use form to change year and mouth ?

I want to use form to search specific year and month
Did anyone thought about it?

Is localization supported?

Hi!
Is it possibile to localize the date strings?

Get Weekday?

Fine library!

Is it possible to get the weekday of a clicked cld-day?

Mon, Tues etc.

TIA

Remove Links from Events

I'm not too familiar with js & I was wondering if you could help me remove the "link" function from events that show on the calendar. I just want plain text to display on the calendar itself, not link to anywhere. Long story short, I'm wondering how to re-write this section of the js file so that it isn't a link, but plain text:

var number = DayNumber(i+1);
// Check Date against Event Dates
for(var n = 0; n < calendar.Model.length; n++){
var evDate = calendar.Model[n].Date;
var toDate = new Date(calendar.Selected.Year, calendar.Selected.Month, (i+1));
if(evDate.getTime() == toDate.getTime()){
number.className += " eventday";
var title = document.createElement('span');
title.className += "cld-title";
if(typeof calendar.Model[n].Link == 'function' || calendar.Options.EventClick){
var a = document.createElement('a');
a.setAttribute('href', '#');
a.innerHTML += calendar.Model[n].Title;
if(calendar.Options.EventClick){
var z = calendar.Model[n].Link;
if(typeof calendar.Model[n].Link != 'string'){
a.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
if(calendar.Options.EventTargetWholeDay){
day.className += " clickable";
day.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
}
}else{
a.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
if(calendar.Options.EventTargetWholeDay){
day.className += " clickable";
day.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
}
}
}else{
a.addEventListener('click', calendar.Model[n].Link);
if(calendar.Options.EventTargetWholeDay){
day.className += " clickable";
day.addEventListener('click', calendar.Model[n].Link);
}
}
title.appendChild(a);
}else{
title.innerHTML += '' + calendar.Model[n].Title + '';
}
number.appendChild(title);
}
}
day.appendChild(number);
// If Today..
if((i+1) == calendar.Today.getDate() && calendar.Selected.Month == calendar.Today.Month && calendar.Selected.Year == calendar.Today.Year){
day.className += " today";
}
days.appendChild(day);
}

Thank you in advance!

How I can change the background color of event day whole column?

It is possible to change the background of 'cld-number eventday'. But may I know how I can change the background of cld-day currMonth event day ?