kylestetz / clndr Goto Github PK

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 :)

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.

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

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).

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

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>

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.

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 ;) )

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?

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?

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?

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?

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.

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.

Currently, the only dependencies I noticed are:

• jQuery
• Underscore.js

But I think I caught a reference to Moment.js? Please document the current requirements in the readme.

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.

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

• pass the calendar object to the callbacks
• bind the scope to the calendar instance

What do you think?

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

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.

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

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

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.

• Locking to a specified date, so you can lock your calendar to a specified year or a range, for example 2013-2015. I wanted to have calendar only for 2014 but wanted to keep navigation turned on so you can click on actual days and switch between months but when you come to an end, you then shouldn't be able to navigate through to 2015.
• I used automatically generated template, wrote my CSS to customise it and now I'd like to inject some data/html into each day cell as it gets rendered. Looks like I would have to use custom template and adjust my styles to the new elements.

Regards
Rad

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

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.

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!

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

You should add these libs as they are devDependencies. Great work!

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>

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)");
});

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!

Hi
I am using ejs as backend template engine, the clndr default template delimiters is conflict wth ejs, do you have any solution?

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.

If event lasts e.g from 2014-01-01 to 2014-03-31 all days in february will be left empty.

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!

Can I use it as a date picker on input fields?

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?

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

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

my target in the click handler has a null date.

clickEvents: {
    click: function(target) {
        console.log(target.date);
    }
}

Is it possible to simply add the calendar's events via HTML instead of JS?

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();
        });

    }
});

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?

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?

Hello again.

I have this use case:

• Calendar instance inside a dropdown
• Click listener on the body to hide any dropdown if the target is not in the dropdown
• clickEvents.click add/remove the selected date in the list of events

Code 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

• Handle this specific use case in the body's click listener, so changing the if condition to take care of nodes that are not in the DOM anymore.
• Call addEvents inside a setTimeout. This way the click bubble correctly, but the code becomes asynchronously ugly.
• Stop the propagation of the click event. This is my favorite solution because I know that selecting a date consumes the click event, so there's no need to call any other listener

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

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).

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.

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.

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?

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?