ahmontero/bootstrap-calendar

Calendar to visualize data using some bootstrap styles.

Bootstrap Calendar

The aim of this plugin is to have a simple calendar to show events using Bootstrap. For sure it can be improved, and you are welcome to do it!

Demo

You can try it [here] (http://ahmontero.github.com/bootstrap-calendar/)

Requisites

• Bootstrap (http://github.com/twitter/bootstrap)
• jQuery (http://jquery.com/)

Quick start

    var evnts = function(){
              return {
                      "event":
                          [
                               {"date":"2012-01-25","title":"1"}
                              ,{"date":"2012-02-01","title":"2"}
                          ]
                      }
          };

    $('element_to_render_calendar').Calendar({ 'events': evnts,
        'weekStart': 1 })
        .on('changeDay', function(event){ alert(event.day.valueOf()); })
        .on('onEvent', function(event){ alert(event.day.valueOf()); })
        .on('onNext', function(event){ alert("Next"); })
        .on('onPrev', function(event){ alert("Prev"); })
        .on('onCurrent', function(event){ alert("Current"); });

Parameters

weekStart: 1|2|3|4|5|6|7

msg_days: Text for week days. Default: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]

msg_months: Text for months. Default: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

msg_today: Text for 'Today' button. Default: 'Today'

msg_events_header: Text for events header. Default: 'Events Today',

events: Events to show in the calendar. Format: {"event":[{"date":"2012-01-25", "title":"1"}]}

bootstrap-calendar's Issues

The example calendar doesn`t show on Internet Explorer 9

The page stays blank with Internet Explorer: http://ahmontero.github.com/bootstrap-calendar/.
Only the github image is shown.

The problem is with the given mime type according to Internet Explorer.
When I run the calendar local it works just fine.

popover not showing correctly

the popover not showing correctly in bootstrap v 2.3.2

Show Next Month on Bootstrap Calendar

Can i show next month at calendar on load?
i have 2 calendar, and i want to show different month on each calendar

like this : http://i.imgur.com/2HbIB.png

sorry for my bad english

Events do not show on Safari

Somehow events do not show on Safari.
They work in all other browsers i checked but not in Safari (see screenshot: http://i48.tinypic.com/2e20607.png).

the javascript debugger doesn`t show any weird errors.

Year and Month aren't displayed

IOn my localhost the year and month aren't displayed. Are there any other requirements or options to set for them to display?

WinXP on WAMP

Error day events - fixed

When you multiple events like:

 var events= [
                      {"date":"2014-08-02","title":"2"},
                      {"date":"2014-08-03","title":"1"},
                      {"date":"2014-08-10","title":"1"},
                      {"date":"2014-08-20","title":"1"},
               ];

The plugin show the events in date-1.
Example.
{"date":"2014-08-02","title":"2"}, show in 2014-08-01
{"date":"2014-08-20","title":"1"}, show in 2014-08-19.

FIX

//on line 131 to 140
elem.parent('div:first').find('#day_' + (event_date.getDate()+1) )
                    .removeClass("day")
                    .addClass('holiday')
                    .empty()
                    .append('<span class="weekday">' +(event_date.getDate()+1)+ '</span>')
                    .popover({
                        'title': msg_evnts_hdr,
                        'content': 'You have ' +this.title+ ' appointments',
                        'delay': { 'show': 250, 'hide': 250 }
                    });