Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added two new features #14

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added two new features #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b6a1494
Added eventClicked event listener. Added configuration option to hide…
Nov 8, 2016
1bc32d5
Added line-height to CSS because some other page styles sometimes ove…
Nov 8, 2016
00542b2
Added information about the added options.
Nov 8, 2016
4c4a969
Fixed typo from README
Nov 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 11 additions & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -13,13 +13,23 @@ months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',
'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
textArrows: {previous: '<', next: '>'},
eventTitle: 'Eventos',
eventDisplayDateOnEventList : true,
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 listeners
Copy link
Contributor

@dianjuar dianjuar Apr 27, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opened a PullRequest #16 to fix to some issues in this file.

Just add an space on the title to render it well. See #16 for examples

One can add event listener if you want to catch clicks on given events.
```Javascript
var options = {
eventClicked : function(eventObject,originalEvent) {
}
}
```

####Event Object Properties
```JavaScript
title: Event title, displayed in bold
Expand Down Expand Up @@ -77,4 +87,4 @@ $('#calendar').eCalendar({
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
```JavaScript
new Date(2016, 0, 31)
```
```
3 changes: 2 additions & 1 deletion css/jquery.e-calendar.css
View file
Open in desktop
@@ -1,4 +1,5 @@
.calendar * {
line-height : 1;
box-sizing: border-box;
font-family: Tahoma;
font-size: 14px;
Expand Down Expand Up @@ -165,4 +166,4 @@

.c-event-over > .description {
font-weight: normal;
}
}
27 changes: 25 additions & 2 deletions js/jquery.e-calendar.js
View file
Open in desktop
Expand Up @@ -40,6 +40,14 @@
var d = $(this).attr('data-event-day');
$('div.c-event-item[data-event-day="' + d + '"]').addClass('c-event-over');
};
var mouseClickEvent = function() {
var d = $(this).attr('data-event-day');
if (typeof(settings.eventClicked)=='function') {
debugger;
$('div.c-event-item[data-event-day="' + d + '"]').trigger("click");
}

}
var mouseLeaveEvent = function () {
$(this).removeClass('c-event-over')
var d = $(this).attr('data-event-day');
Expand Down Expand Up @@ -139,6 +147,8 @@
if (d.getDate() == day && d.getMonth() == dMonth && d.getFullYear() == dYear) {
cDay.addClass('c-event').attr('data-event-day', d.getDate());
cDay.on('mouseover', mouseOverEvent).on('mouseleave', mouseLeaveEvent);
cDay.on("click",mouseClickEvent);

}
}
cDay.html(day++);
Expand All @@ -154,7 +164,19 @@
if (d.getMonth() == dMonth && d.getFullYear() == dYear) {
var date = lpad(d.getDate(), 2) + '/' + lpad(d.getMonth() + 1, 2) + ' ' + lpad(d.getHours(), 2) + ':' + lpad(d.getMinutes(), 2);
var item = $('<div/>').addClass('c-event-item');
var title = $('<div/>').addClass('title').html(date + ' ' + settings.events[i].title + '<br/>');
if (typeof(settings.eventClicked)=='function') {
(function(item,calevt) {
$(item).on("click",function(evt) {
settings.eventClicked(calevt,evt);
});
})(item,settings.events[i]);
}
var eventTitle = "";
if (settings.eventDisplayDateOnEventList) {
eventTitle += date + ' ';
}
eventTitle += settings.events[i].title + '<br/>';
var title = $('<div/>').addClass('title').html(eventTitle);
var description = $('<div/>').addClass('description').html(settings.events[i].description + '<br/>');
item.attr('data-event-day', d.getDate());
item.on('mouseover', mouseOverItem).on('mouseleave', mouseLeaveItem);
Expand Down Expand Up @@ -196,6 +218,7 @@
months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
textArrows: {previous: '<', next: '>'},
eventTitle: 'Eventos',
eventDisplayDateOnEventList : true,
url: '',
events: [
{title: 'Evento de Abertura', description: 'Abertura das Olimpíadas Rio 2016', datetime: new Date(2016, new Date().getMonth(), 12, 17)},
Expand All @@ -205,4 +228,4 @@
firstDayOfWeek: 0
};

}(jQuery));
}(jQuery));