kylestetz / clndr Goto Github PK
View Code? Open in Web Editor NEW:calendar: a jQuery calendar plugin that uses HTML templates
Home Page: http://kylestetz.github.io/CLNDR/
License: MIT License
:calendar: a jQuery calendar plugin that uses HTML templates
Home Page: http://kylestetz.github.io/CLNDR/
License: MIT License
You should add these libs as they are devDependencies. Great work!
Hello,
we have just add CLNDR to twittstrap resources list
http://www.twittstrap.com/resources
If you want your resource to be removed, please send us an email to [email protected] 'Remove from resource'.
Best Regards
The Twittstrap Team
Just wanted to let you know that I've just integrated CLNDR in a project using Handlebars.js. Thanks for the great plugin!
I noticed in a previous PR someone suggested eliminating Underscore as a dependency; I second that thought. Perhaps the current template
option functionality could be ported to the render
option—we could detect the type of the value passed in (string vs. function).
I first tried this in my personal project but tested it with your example file and it's easy to reproduce. Recurring events are shown just fine, but adding a single day event to the eventArray would trigger the actual day (today) to get the "event" class applied and not show the event on the given date at all.
I tried this with your example site.js:
var eventArray = [
{ startDate: thisMonth + '-03', endDate: thisMonth + '-08', title: 'Multi-Day Event' },
{ startDate: thisMonth + '-21', endDate: thisMonth + '-23', title: 'Another Multi-Day Event' },
{ date: '2013-11-25', title: 'Ow Mah Gawd Single Day'}
];
By deleting the multiDayEvents option the single event is shown again.
By deleting all recurring events from the eventArray the "event" class is withdrawn from the actual day (today)
With the multiDayEvents option defined, the described behavior triggers even if there are no recurring events given yet
This is amazing! Such great work.
I was wondering if there would be an easy way to let events have a start/end date and to be repeating (i.e. repeat each day, each week etc).
Would it be possible to pass a month array like the daysOfTheWeek Option when the calendar will be build?
Hi great project.
Is there a way to specify a minimum and maximum date?
Say that I want my calendar to display dates starting from today and only in the coming 6 months.
Alternatively, adding a css class to all dates before today might work.
Something like
<div class="day past calendar-day-2013-10-25">25</div>
<div class="day today calendar-day-2013-10-26">26</div>
<div class="day calendar-day-2013-10-27">27</div>
Is it possible to simply add the calendar's events via HTML instead of JS?
my target
in the click handler has a null
date.
clickEvents: {
click: function(target) {
console.log(target.date);
}
}
Hi,
I use CLNDR for the first time, thanks for this work! But I have an issue with internationalization, I build a website in 9 differents languages.
So, in English, it's ok, but in other language, when the week doesn't start with Sunday, it's not good. I use Moment.js (2.2.1), with one JS file per language.
(For example, I'm using this file for French : https://github.com/moment/moment/blob/develop/lang/fr.js )
If I don't set the option weekOffset to CLNDR,
The head is good, and start by "L" (Monday) so it's OK, but the days below are not ok, today we are the 15th, "M" (Tuesday), it should be the second column, not the third.
And, if I set the weekOffset to 1 for CLNDR, as you say in the doc
the head is not ok, and start by Tuesday, but the days below are ok, and start by monday...
The array weekdaysMin in the file https://github.com/moment/moment/blob/develop/lang/fr.js start by Sunday as you say in the doc, but the variable dow (same JS file) tell the first day is monday, so I think it's modify the array in moment.js. My stuff work if i set dow to 0 in all my language file starting by Monday, but it's not very handy if we need to change every moment lang JS file every time...)
(For information, i'm using the default template you're providing)
(Sorry for my English, hope you'll understand me ;) )
When clicking a date in the full month view, is it possible to have the plugin only display events for the clicked date instead of showing the entire month?
Hi,
@kylestetz, I saw the first example on the home page and immediately recognized that it is perfect for my site (with a few style, orientation, and color tweaks). Could you walk me through how to make this with CSS? I looked at the source code and saw it was LESS (LESS2CSS didn't work very well. It also seems a bit complex. Basically, I need the same thing, just with the events list below it so that it can fit in a sidebar. I looked at the JavaScript portion and saw just how easy it is!
I don't want to sound like I'm asking you to do something for my project specifically, but I do think it would be a good idea to add the calendars shown on the website to the examples on GitHub.
Thanks
I'm trying to add background image to all the dates in that particular month which is shown. How can this be achieved?
I tried with this, but it will apply to the whole days class, which is obviously not what i want. Any help is appreciated.
$(".day").each(function(){
$(this).children().css("background","url(http://jasonlefkowitz.net/wp-content/uploads/2013/07/Cats.jpg)");
});
Hi Kyle!
I think it's a simple question.
Instead of having the navigation buttons, to see the next and previous months, is there a way to do something like this > http://i.imgur.com/qNQbJ8y.png, without messing the code?
I'm using the basic code that you show in the exemple.
When i say "messing the code" i mean do something like this: http://pastebin.com/SX62GPq6
And each one will have a an date with event.
Sorry for my bad english, if you don't understand my question, i'll to explain again :)
If event lasts e.g from 2014-01-01 to 2014-03-31 all days in february will be left empty.
Hi and a very big thanks for this calendar, it's awesome :) !
For my website, I've rebuild the calendar there http://kylestetz.github.io/CLNDR/#mini-clndr . So when I click on a date, I see the list of the events for the current month.
In this list, I would like to display only the events that are linked to the clicked date, not to the whole month. I think it's a more logical behavior since the visitor click on a date, not on a month.
Maybe could you add a eventsThisDay for the template or tell me how to achieve that ?
Thanks a lot,
Cédric
Is there currently a way to select an individual day and display only its events to the right (like you have on your website)?
Barring that, the ability to customize the DOM for each date field would be absolutely fantastic.
This is great, thanks!
First of all, LOVE this project. It's been great. One small suggestion / tweak or I don't know what I'm doing.
Is their an option for generating and equal number of rows for every month? You can see in the iCal example, they've padded April with an additional row of days from the next month but in the CLNDR example, it's truncated the days on the 4th.
It would be nice if this
inside event callbacks was the calendar object.
var calendar = $("#calendar").clndr({
clickEvents: {
click: function () {
// here 'this' is 'calendar.options.clickEvents'
}
},
doneRendering: function () {
// here' this' is 'calendar.options'
// this method is synchronous, so calendar is null
// the first time it gets called
}
});
I can have multiple calendars in the page, they have the same behavior on click but they need to access some of the values I specify in extras
and the calendar state (like the current displayed month).
I see two solutions
What do you think?
Would it be possible to add a function to navigate inside a Day to the next / previous day´s events? how to do this at best?
Starting with a month view of the calendar, I would like to have it so that when a date is clicked it switches to a week view with the day selected displayed. Kind of like iOS 7 calendar features.
What is the best way of going about this?
Thanks very much for the awesome rabbit hole. Really looking forward to digging deeper into it.
Right now I'm trying to implement a standard 'business days' calendar that shows only the 5 'non-weekend' days which is a common enough task that I think it deserves a passage in the documentation.
Perhaps most of my problem is that I've not needed to use moment.js before but, reading the 'Usage' section i'm puzzled by the passage:
// an array of day abbreviations. If you have moment.js set to a different language, // it will guess these for you! If for some reason that doesn't work, use this... // the array MUST start with Sunday // (use in conjunction with weekOffset to change the starting day to Monday) daysOfTheWeek: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
It looks like that's a non-English listing of day abbrvs. There's some ambiguity re: starting day 'MUST start with Sunday' and the instruction to use the weekOffset.
And perhaps I'm totally missing the point of 'dayOfTheWeek' - is that intended only to establish the abbreviation to display in the header? I'm looking at it as the way to establish which days to include in the grid. IOW, I'm thinking that:
daysOfTheWeek: ['M', 'T', 'W', 'T', 'F'],
_should give me just the weekdays. Clearly, that's not correct. It begins to look as though I need to understand how to step into the template, detect that a given day is weekend or weekday and render or not render according to that decision.
It'd be very helpful to see how that's accomplished - I'd be more write up something to add to the docs.
CLNDR should also work well with lodash which has a _.template
method similar to Underscore. It would be rad if it was a noted too :D
Hi there, love this plugin. May I know how I could customize the the day.classes for each day inside the days array?
Lets say for example I have a calendar with a few days to 'blackout'. So these days will never have any events on them. I would like to customize a .blackout class to be shown on the generated calendar.
is that possible?
How to add a unique class to the event day?
<div class="day past calendar-day-2013-12-01" id="">1</div>
<div class="day past event my-event-class calendar-day-2013-12-02" id="">2</div>
or
<div class="day past event start-event-class calendar-day-2013-12-02" id="">2</div>
<div class="day past event calendar-day-2013-12-02" id="">2</div>
<div class="day past event calendar-day-2013-12-03" id="">3</div>
<div class="day past event end-event-class calendar-day-2013-12-04" id="">4</div>
Firstly, thanks for your amazing work. It's not a datepicker, but it has let me build my own in a responsive manner, something which I felt was lacking in whatever else I could find.
However I think it is within the scope of this project to have a bit more integration when it comes to selecting a year. Currently I use doneRendering to add an event listener on a select box I added. Maybe I'm missing a trick with targets and clickEvents?
First of all, thanks for such a great plugin, by far the best calendar plugin around! Just a few niggles though that I'd like to fix (but can't figure out how to). Firstly the day number in each date block, e.g. 1, 2, 3
etc. I'd like these to be 2 digits, preceded with a 0, e.g. 01, 02, 03
etc, if possible?
One more small thing, I'd like to add the date name to each block, so each block would go as follows: Mon 01, Tue 02, Wed 03
etc, if possible?
I have a jsFiddle set up too: http://jsfiddle.net/32EEF/1/
Thanks again for the great plugin!
I'm trying to wrap my head around it, but I can't seem to think of a way to get multiple calendars with different events on a single page to work. Any pointers?
Can you please show one example using two different dropdowns - one for month - one for years. Firefox stops working, if I implement that, because of the change/rendered-Status. I need to choose a month, and/or one year. After that events are fired the new Month should be shown. Same behaviour, if next or previous month is selected. Here is the problem. I think the event is fired twice. Please show one example. Thanks!
Someone asked me this question directly and I thought it would be useful to post here for others to come across.
If you'd like to show your events with different colors, you'll need some way of distinguishing them within the event data. Let's say our event data has a type
:
events = [
{ date: "2013-09-16", title: "Baseball Game", type: "sports" }
]
Now in my template I can ask what the event type is, or better yet I can just dump the event type out as a class and style it accordingly.
<div class="clndr-grid">
<div class="days">
<% _.each(days, function(day) { %>
<div class="<%= day.classes %>" id="<%= day.id %>">
<div class="number"><%= day.day %></div>
<% _.each(day.events, function(event){ %>
<div class="event <%= event.type %>"><%= event.title %></div>
<% }) %>
</div>
<% }); %>
</div>
</div>
Here each grid box contains a <div>
for every event on that day. The class on the <div>
is the event's type, which means I can now style .sports { background-color: red; }
and specify other colors for other event types.
Amazing job you have done!
I would like to ask you if is it already possible to show a week only, not a full month?
Regards :)
EDIT: And the anwser is:
Template
<script type="text/template" id="clndr_template">
<div class="controls">
<button class="clndr-previous-button">Prev.</button>
<div class="month"><%= days[extras.currentWeek * 7].date.format('YYYY-MM-DD') %> - <%= days[extras.currentWeek * 7 + 6].date.format('YYYY-MM-DD') %></div>
<button class="clndr-next-button">Next</button>
</div>
<div class="days-of-the-week clearfix">
<% _.each(daysOfTheWeek, function(day) { %>
<div class="header-day"><%= day %></div>
<% }); %>
</div>
<div class="days clearfix">
<% for(var i = extras.currentWeek * 7; i < extras.currentWeek * 7 + 7; i++) { %>
<div class="<%= days[i].classes %>" id="<%= days[i].id %>"><%= days[i].day %></div>
<% } %>
</div>
</script>
<div id="clndr"></div>
Javascript
function weeksInMonth(month) {
return Math.floor((month.daysInMonth() + moment(month).startOf('month').weekday()) / 7);
}
var clndr = $('#clndr').clndr({
template: $('#clndr_template').html(),
extras: {
currentWeek: Math.floor( ( ( (moment().date() + moment().startOf('month').weekday() ) - 1 ) / ( weeksInMonth(moment() ) * 7) ) * weeksInMonth( moment() ) )
},
doneRendering: function() {
/* Next button handler */
$('#clndr .clndr-next-button').on('click', function() {
/* Get numbers of weeks in the month */
var weeks_in_month = Math.floor(clndr.month.daysInMonth() / 7) - 1;
if(clndr.options.extras.currentWeek < weeks_in_month) {
/* Increase the week count */
clndr.options.extras.currentWeek += 1;
} else {
/* Reset the week count */
clndr.options.extras.currentWeek = 0;
/* Go to next month */
clndr.next();
}
clndr.render();
});
/* Previous button handler */
$('#clndr .clndr-previous-button').on('click', function() {
/* Get numbers of weeks in the month */
var weeks_in_month = Math.floor(clndr.month.weeks_in_month() / 7) - 1;
if(clndr.options.extras.currentWeek > 0) {
/* Decrease the week count */
clndr.options.extras.currentWeek -= 1;
} else {
/* Reset the week count */
clndr.options.extras.currentWeek = weeks_in_month;
/* Go to previous month */
clndr.back();
}
clndr.render();
});
}
});
Currently, the only dependencies I noticed are:
But I think I caught a reference to Moment.js? Please document the current requirements in the readme.
Sorry for my English... In Russian calendar week start at Monday. How can I do this?
Thanks a lot! CLNDR is very cool and exactly that I need now.
Do you think about selectable?
Thanks for CLNDR, such a great cal tool!
I am using it on my site and thought you might consider these 2 features that I added manually.
Regards
Rad
Hi,
I am fetching the data for the events from the server and sometimes it just returns null. When it is null clndr.js thorws an error saying this.options.events is null. Is there any way I can resole this ?
Many thanks for your help.
Chintan
I am using Handlebars as a template language. Today I wanted to update my clndr.js, as I was still using the 1.0.4 version.
After updating to version 1.0.12, the calendar broke. So I went looking for the problem and saw that my calendar broke by the IE 8 fixes (update 1.0.7).
The problem is that some functions like eventsNextMonth returned plain array before 1.0.7. After 1.0.7, the options.events are 'jQueryfied' and so return a jQuery objects. As Handlebars each helper
only works with plain objects/arrays, the functions doen't work anymore.
For me I could fix this by adding jQuery's toArray() at line 67:
if (this.eventsLastMonth = [], this.eventsThisMonth = [], this.eventsNextMonth = [], this.options.events.length && (this.eventsThisMonth = $(this.options.events).filter(function() { return this._clndrDateObject.format("YYYY-MM") == currentMonth.format("YYYY-MM"); }).toArray(), this.options.showAdjacentMonths))
Could this be fixed in an upcoming version?
Can I use it as a date picker on input fields?
Hello,
is it possible to get numerical representation of the month inside a template?
Currently the best I could get is -
<a href='/events/month/<%= month.toLowerCase() + '-' + year %>'>
<%= month %> <%= year %>
</a>
which turns out to be full textual representation. The problem starts when internationalization is used and the language gets switched. The link is generated in selected language. The most appropriate solution here would be to generate numerical representation of the month which is language agnostic.
I would like to generate, link in format 'yyyy-mm' (2014-04) or 'mm-yyyy' (04-2014).
My current CLNDR version is v1.1.0.
Hey, I think latest version (v1.0.13) has a bug.
It is showing me all months starting one day behind.
Example
Reality: October 1st, 2013 is a Tuesday
CLNDR: October 1st, 2013 is a Monday
Hi
I am using ejs as backend template engine, the clndr default template delimiters is conflict wth ejs, do you have any solution?
Is there a special reason why clndr won't show when the json for the events option is empty?
I'd like to show clndr even if there are no events to be shown.
I downloaded this repo at version 1.0.6 and was playing with the included demo. Everything worked great as far as I noticed.
I'm now working on a project and just grabbed the latest (1.0.9) for use in it. I noticed that events from my eventsArray are not being passed to my click event handler. I knew this was working when I was playing around with the example before, so as a quick test I stuck version 1.0.9 source into the example for 1.0.6, and the same issue occurred.
Not sure if I'm missing something, but to reiterate, all I did was swap the CLNDR.js source in the example with the recent 1.0.9 and in my click event handler, the events array is always empty when there should be an event associated with that day.
Let me know if you need to see my code or anything else.
thanks.
I want my events to go to a scpecified URL when they are clicked.
Here is what I have:
var clndr = {};
$jq( function() {
var events = [
{ date: '2013-10-10', title: 'Test 1', location: 'Google', url: 'http://www.google.com' },
{ date: '2013-10-19', title: 'Test 2', location: 'Google', url: 'http://www.google.com' },
{ date: '2013-10-23', title: 'Test 3', location: 'Google', url: 'http://www.google.com' },
{ date: '2013-10-07', title: 'Test 4', location: 'Google', url: 'http://www.google.com' }
];
clndr = $jq('#full-clndr').clndr({
template: $jq('#full-clndr-template').html(),
events: events,
clickEvents: {
click: function(target) {
window.location.href = target.url;
}
},
adjacentDaysChangeMonth: true
});
});
Why doesn't this work?
Hi, I am noticing an issue with IE8 and lower. I'm getting the following two errors:
SCRIPT438: The property or method 'filter' is not supported for this object (clndr-1.0.6.min.js, line 2 character 2378
Is this any issue you are able to fix? Thanks!
Edit: found this, it might be of help. http://stackoverflow.com/questions/7153470/why-wont-filter-work-in-interent-explorer-8
Hello, i don't know if this is the right place to ask such a question, but how would i go about doing a year-view calendar (while keeping support for events) ? i thought about using multiple instances of CLNDR, one for each month with
startWithMonth: moment().add('months', i) ,
but this doesn't seem like an elegant way... Is there a way to do this with only one instance of CLNDR ?
Thanks.
When I try the below setup:
constraints: {
startDate: '2013-01-01',
endDate: '2013-12-31'
}
Work great for Chrome, but it seems be ignored by IE8.
Events aren't getting populated in ff & safari. Something to do with Moment & the Date object I'm sure; chrome is more forgiving about date formatting.
Having id
be the identifier works fine if you only have one calendar. If you have multiple, with proper code, it is not necessarily an issue but functionality could vary by browser.
From the w3c, the 'id' attribute "assigns a name to an element. This name must be unique in a document."
I know we can work around this, for example doing
class="<%= day.classes %> <%= day.id %>"
but we also have to code the logic of parsing the date out of that element, since target.date
becomes null
Could an option for which attribute the day.id
will be set be implemented?
Great work, though. Very easy to get up and running.
I understand this sounds like unforgivable blasphemy but a calendar is actually a table. Yes, yes, I know all the "don't use tables for page layout" stuff. Believe me, I know that. But I'm not talking about page layout here. I'm talking about presenting tabular data and a calendar is tabular data: http://codepen.io/WebDevCA/pen/tsHpw
Hello again.
I have this use case:
clickEvents.click
add/remove the selected date in the list of eventsCode looks more or less like this
$(".current-month").clndr({
template: template,
startWithMonth: today,
clickEvents: {
click: function (target) {
// NOTE: this triggers a calendar refresh
this.addEvents([{
date: target.date
}]);
}
}
});
Somewhere else in the application
$("body").click(function (event) {
var target = $(event.target);
if (target.parents(".dropdown-container").length) {
return;
}
$(".active").removeClass("active");
});
Now the problem is that by adding a date to the list of events, the calendar is refreshed and the click target gets detached from the DOM. So by the time the event bubbles to the body target.parents(".dropdown-container").length
is equal 0
while at the beginning of the click it happened to be 1
.
I wanted to have your opinion because I see few options here
if
condition to take care of nodes that are not in the DOM anymore.addEvents
inside a setTimeout
. This way the click bubble correctly, but the code becomes asynchronously ugly.The third solution cannot be implemented because the click callback does not receive the original browser event.
Do you think it makes sense to pass the original browser event to the callbacks in clickEvents
?
After all we receive already the DOM element, so the event is a nice companion.
The third solution in looks like this
$(".current-month").clndr({
clickEvents: {
click: function (target) {
target.event.stopPropagation();
this.addEvents([{
date: target.date
}]);
}
}
});
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.