jhonis / e-calendar

jQuery plugin for create a calendar with events.

e-calendar

####How to use One of the simplest ways to generate a calendar is to create a div that has an element that can be chosen with jQuery. Ex: <div id="calendar"></div>

####Options (default)

weekDays: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
         'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
textArrows: {previous: '<', next: '>'},
eventTitle: 'Eventos',
url: '',
events: [
    {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2016, 0, 12, 17)},
    {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2016, 0, 23, 16)}
],
firstDayOfWeek: 0

####Event Object Properties

title: Event title, displayed in bold
description: Event description
datetime: Date and time of event

####Examples of use

$('#calendar').eCalendar({url: 'loadCalendar'});

$('#calendar').eCalendar({
	events: [
	    {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2016, 0, 12, 17)},
	    {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2016, 0, 23, 16)}
	]
});

$('#calendar').eCalendar({url: 'loadCalendar',
                          weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                          firstDayOfWeek: 1}); // calendar starting on monday | (0 - 6: week days format)

//With links on the description
$('#calendar').eCalendar({
    events: [
        {
          title: 'Event Title 1', 
          description: 'Description 1. Without link', 
          datetime: new Date(2016, 9, 20, 17) 
        },
        {
          title: 'Event Title 2', 
          description: 'Description 2. Only with link opening in the same tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com"
        },
        {
          title: 'Event Title 2', 
          description: 'Description 3. With link opening on new tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com", 
          url_blank: true
        },
        {
          title: 'Event Title 2', 
          description: 'Description 4. Only with link opening in the same tab', 
          datetime: new Date(2016, 9, 23, 16), 
          url: "https://www.google.com", 
          url_blank: false
        }
    ]
});

PS: remember that in date object instantiation, like the code below, the month starts from 0 to 11 and generate a date: 31/01/2016

new Date(2016, 0, 31)

e-calendar's Issues

Last day month Jumps to the next Months

When try to apply a new date on an event like this:
datetime: new Date(2016, 1, 31, 12, 30),
with format: Year(Actual), Month(January), Day...

Another events runs with any problem...
But this event with day 30 or 31, jumps into the next month: February, on the 1 or 2 day of February respectively.

Changing Date Format

Is there a way to change the date format to the US format MM/DD/YYYY

Adding URL

Any way to add URL to either title or description? So i can link to predefined page when this link is clicked?

Render events from API on month change

When I fetch events from API on next/prev month change events don't appear because sometimes API is late and only DOM renders so calendar shows no events. I need to render calendar and fetched events simultaneously. I tried to use SetTimeout method but it doesn't work always. What's the best way to fix this issue?

First day of the Week

Hello,

It would be nice to have an option for setting "Monday" to first day of the week instead of Sunday. It's an option on most calendars out there. I haven't found a way to hardcode it :(

the date of 2017-05 | 06 is wrong

wrong:
var dLastDayOfPreviousMonth = new Date(dYear, dMonth + 1, 0).getDate() - dWeekDayOfMonthStart + 1;

correct:
var dLastDayOfPreviousMonth = new Date(dYear, dMonth, 0).getDate() - dWeekDayOfMonthStart + 1;

please check the dates of 2017-06, and you can see the dates of pre-month is wrong.

How to get the selected date value?

Hello, Really great calendar! I want to get the value of the date on click. Any suggestions?

Add date filtering

I would like to add date filter function attached to the calendar. So that I can only display events within a specified date range.

For example:
I want event list to only show events from date 2019-08-01 until 2019-10-30.

Is that possible to do so? Thanks in advance!

Dynamic data from api in events option

Hello i found this plugin very useful , but i want to work with my api that return a json data.

I dont know how to work with events option in the parametres to add a dynamic url , please help me .

Thanks .

onClick event

Hi,
how can I raise onClick event , when a user click on a date ?

Start Month

Hello. Can we set start month for calendar?

loop inside the json value

Is there anyway to use loop inside ecalendar i do need to add the custom events which should be inside loop ?

It accepts only sharp times like 14:00, 2:00 and throws error incase of time like 14:23, 3:45 etc

events: [
    {title: 'Event Title 1', description: 'Description 1', datetime: new Date(2016, 0, 12, 17)},
    {title: 'Event Title 2', description: 'Description 2', datetime: new Date(2016, 0, 23, 16)}`
],

Since it accepts only sharp times such as 2:00, 12:00, 16:00 and throws error when mentioned it as 2:13, 16:34, this makes the code less usable and practical because the events are not always on sharp and complete hour times. It cant be at any minute of the hour.

Can this be already done and i'm unaware ?
I would like to know how can we make it accept any time instead of just sharp times
@jhonis

off-by-one error when passing events?

d.getMonth gives a value between 0 and 11; it seems to me you're using them incorrectly.

I had an issue where all Dates passed via ISO-Date-String got off by one (e.g. displayed in May when they really were in June).

So, remove the (-1) next to d.getMonth() in Lines 125 and 140 and add (+1) on Line 141.

Sorry, I can't really provide you with a Testcase, but it seems to work now for me.

Unable to show events from December

If we have events on December, it can't show. If we pass events to the next year of January it shows again.

not working getDate()

d.getDate is not a function Line - 140

i need Priority also - it is possible to add ?

Hey, great calender - i would use it in my project but i need something like priority handling ?
It is possibe to add ?

for example something like

index.html:

priority: 'high' 
priority: 'medium' (this default if not set)  
priority: 'low'

css:

.c-event {
    background-color: darkgrey;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.c-event-high {
    background-color: grey;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.c-event-low {
    background-color: lightgrey;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

code: (sorry i'm not a great JavaScript developer ;):

for (var j = 0; j < settings.events.length; j++) {
                        var d = settings.events[j].datetime;
// default priority = 'medium'
						var p = settings.events[j].priority;
						if (typeof p === "undefined") {
							p = 'medium'; 	
							settings.events[j].priority = p;
						}
						
                        if (d.getDate() == day && d.getMonth() == dMonth && d.getFullYear() == dYear) {
							
							if (p == 'high' && !cDay.hasClass("c-event-high")) {
							   cDay.addClass('c-event-high').attr('data-event-day', d.getDate());
							}	
							
							if (p == 'medium' && !cDay.hasClass("c-event-high") && !cDay.hasClass("c-event")) {
							   cDay.addClass('c-event').attr('data-event-day', d.getDate());
							}	
							
							if (p == 'low' && !cDay.hasClass("c-event-high") && !cDay.hasClass("c-event") && !cDay.hasClass("c-event-low") ) {
								cDay.addClass('c-event-low').attr('data-event-day', d.getDate());
							}	
							
							
                            cDay.addClass('c-event').attr('data-event-day', d.getDate());
                            cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);
                        }
}

...

There is something wrong with the day of last month

There is 31 in January but when i turn to February it shows that January only has 28.please fix this