serhioromano/bootstrap-calendar

Full view calendar with year, month, week and day views based on templates with Twitter Bootstrap.

bootstrap-calendar's Issues

I can't see the tooltips of events

When the mouse goes over the event, I see the html code for the tooltip, but not show in the page.

Calendar breaks under latest jQuery (1.10.2)

Calendar mostly functions using latest jQuery rather than the bundled 1.8.3 version, however it breaks when clicking on a day for the event list slide down.

Here's the specific console error when clicking on a day in month view:

Uncaught TypeError: undefined is not a function

Update bower package?

Currently the bower package is outdated - could it be updated?

Avoid storing events data in tags and use JavaScript objects

In templates, we sometimes use the javascript objects containing events data, and sometimes we store and retrieve the events data from html attributes.

What about using always javascript objects? So, if the events contain custom data the users can retrieve these data.

In addition to having cleaner and simpler templates, it's sometimes a requirements because not all data can be stored in html attributes in a fashionable manner (think for example at event attributes that are javascript objects).

Can we use it?

It may sound like a really dumb question.
In fact, I found your bundle while searching a good calendar to integrate with bootstrap for a quick project.

It looks really great and I wish to give it a try, but I am quite affraid by the limitation you mentioned in the readme file.
What would be the drawbacks of using this bundle ? Any known limitation ?

How can i use the events for nex/prev/today month from a button?

i've been trying to do it by copying code from the sample web page but i just can't figure that out, hope you could help me

Thanks

Uncaught SyntaxError: Unexpected token ILLEGAL

When trying to use bootstrap calendar I get the following error. Am using the example JSON provided from the repo but it fails to work.

The stacktrace for the "Uncaught SyntaxError: Unexpected token ILLEGAL" is as follows:

Uncaught SyntaxError: Unexpected token ILLEGAL underscore-min.js:5
j.template underscore-min.js:5
(anonymous function) calendar.js:615
c jquery-1.10.2.min.js:4
p.add jquery-1.10.2.min.js:4
Calendar._loadTemplate calendar.js:614
Calendar._render calendar.js:217
Calendar.view calendar.js:454
Calendar calendar.js:194
$.fn.calendar calendar.js:768
(anonymous function) my-app/groups/:73
c jquery-1.10.2.min.js:4
p.fireWith jquery-1.10.2.min.js:4
x.extend.ready jquery-1.10.2.min.js:4

Move events

The ability to move events is very important for web based applications. The idea is to hold small event circle and drag movable events. Calendar will highlight day and you can drop it there.

Callback will be triggered to handle event movement.

Day view not working in bootstrap 2 or 3

Hi, I am looking at using this in an upcoming project as its a perfect fir for my needs. Unfortunately the day view shows nothing but a couple of event dots.

The console is showing nothing out of the ordinary. Is this a known issue?
I have attached a screenshot for you

Can't start Up

I have a question.

When i set up everything like on the documentation in the Firefox on JavaScript Error i have something like:

TypeError: this.options.templates[this.options.view] is not a function

and the calendar don't start

Tooltips not working on month view

I've integrated the calendar on a project and it looks and functions great. The one thing that I didn't like was that the circles didn't have tool tips.
After I looked into it, I found that you already have enabled the tool tips in calender.js.
However, the tool tip never appears.
I've looked into this for about 4 hours now with no progress... so I figured I'd submit this issue. JS isn't my forte.
I also notice that you are using the old bootstrap method for tool tips (rel="tooltip"). This was changed in 2.2 of bootstrap I think, rel="tooltip" doesn't pass html validation, they now use data-toggle="tooltip". Unfortunately after updating to use the latest method, it had no effect on showing the tool tip.

"today" navigation button does not work correctly, when first day of the week is Monday

Scenario:

1. Let's assume that today is Sunday, 22nd September 2013.
2. Switch the view to "week" view.
3. Use the language, where the first day of the week is Monday (i.e. Polish) or switch to this mode manually.
4. Click "today" button.
5. The calendar should show the week 16-22 September, but it shows 23-29 September.

Holidays could be integrated in language files

What about adding holidays to language files?
I'm thinking of having the same functionality of first_day: in order of precedence:

1. If a holidays object is present in options we use it
2. If a holidays object is present in calendar_languages[...] we use it
3. Finally we use a new holidays object (for en-US) in the defaults_extended object

If it's ok for you I can proceed with a pull request...

Can't fire it up

Hi,

I'm having trouble with the "minimum setup" example in the description. After adding

var calendar = $('#calendar').calendar();

to my html file, all I get in return is a console error:

Error: Calendar: Events load URL is not set

The same thing happens when I try this

var calendar = $('#calendar').calendar({events_url:''});

I know you're supposed to bring in data over an URL/JSON api but it would be nice to be able to preview the calendar without it. Sometimes you need to design a website before all the backend data access is ready (and previewing the calendar this way would help a lot with that)

For the record, I'm using jQuery 1.10.2, Bootstrap 2.3.2, Underscore 1.5.1 and your 0.0.9 release.

Double slide

Could you look at this I cannot find where it is.

When you click on day cell it unfold list of events, if you click on empty cell it folds events list. But if you click again on events cell it unfold twice.

Problem when timestamp is exactly on the beginning of a day

What I've noticed is that when an event has the start and end variables:

• equal
• in the start of a day (e.g. 2013-11-25 00:00:00)

the events is not illustrated on the calendar. I didn't have the time to debug it myself. Please consider it.

calendar.set_options() does not update the calendar view

If I call calendar.set_options({ view: 'year' });, I want the calendar to auto refresh and show the "year" view, what doesn't happen.
I have to call calendar.render() in sequence to make the right view to be rendered. I don't know if calling render after the calendar is actually rendered will give me troubles (like throwing extra and unnecessary HTML in the calendar container);
Is that an expected behavior? Can it be improved?

Time zone conversion

Would be useful to have 2 new parameters

timezone: {
    convert: true,
    original: '+4'
}

This will convers server time to local according to server time zone and local time zone difference.

Reference #65

Composer Install

As composer is now the official SF2 package manager, it could be nice to be able to install this bundle through composer.

Navigation buttons not working

I'm currently having an issue where the navigation buttons aren't doing anything.

This is my code:

<button class="btn" data-calendar-nav="prev"><<</button>
<button class="btn" data-calendar-nav="today">[Today]</button>
<button class="btn" data-calendar-nav="next">>></button>

No JS errors appear, nor do I think the prototype.navigate is ever called.

According to the Chrome dev console, JS files are being loaded in the following order:

• jQuery
• jQuery UI
• Bootstrap
• Underscore
• Calendar Language file (nl-NL.js made by me)
• Calendar
• App.js

Bootstrap 3

I can't find anyone having asked this before, so I'll go ahead!

Is there an opinion as to whether bootstrap-calendar should be updated to work with Bootstrap 3? Or another branch be maintained? Just wondering, I'd be happy to contribute if there is an existing effort.

Update bower package?

Internet Explorer 8 compatibility

If you want Internet Exploder 8 compatibility you need to replace "class" parameter with any other (my suggestion 'style_class') because IE interpreter bugs with class as reserved name.

Why POST instead of GET?

Why are you using POST request to GET the data from the server?

No access to the cal variable in week-days template

The cal variable doesn't seem to be passed to the week-days template, like it is with other templates. I need this for additional language changes, but I can't, because it says "cal is not defined".

Any idea how to fix this? I've tried looking around in calendar.js, but I haven't found where you tell it to pass the cal variable.

Params sending to php script are incorrect

After conversion this unixtimestamp i am getting: "Thu, 08 Jun 45628 16:00:00 GMT"
The correct date should be: 29 Aug 2013

start/end dates for ajax post

lets say i want the events for May 2013, it seems that the start date sent to the ajax post is 30th April 2013 23:59:59 and the finish value is 31st May 22:59:59 (i think)

Could this not be in start: 1st May 2013 00:00:00 to 1st June 2013 00:00:00?

I think this works better when querying dates in databases? But I could be wrong....

Language not defined?

I clearly have language defined in my options var as 'nl-NL' (made myself a dutch translation; not finished, I will do a PR when I'm done). However, I keep getting 'Uncaught ReferenceError: language is not defined'. Any ideas as to why this is happening?

Add visibility to calendar properties

First, I am using your component and I think it is really cool, thanks for sharing it.

The problem I am facing right now is that I want to know more about the calendar "status", like which range of date it is showing, or in which view mode it is, and more information a calendar could give to me. In my case, for example, I want to enable the "Go to today" button only if the user is not really seeing today.

But I didn't see a way to do it, as I don't know the actual range of the calendar (or I don't know where to find it). What I can call is the calendar.title() (which I think it should be getTitle()), but a localized string will not help me on this.

Thank you, and forgive me if I missed something.

Single click open events list

Single click in month/year cell slide down list of events.

No event title displayed in event slider

The event title is not displayed because the template is looking for data-original-title which does not exist.

how to run bootstrap calendar in asp.net

how can i run bootstrap calendar on asp.net , i tried many times and it didn't work, i get only an error 405 method not allowed , please i need help

Referential issue with default values for defaults.position.start and defaults.position.end

There is a peculiar referential issue relating to the Date instances assigned to the defaults.position object that only becomes apparent when attempting to use multiple Calendars on a single page, as I am doing for a project which requires inter-linked Calendars rather than the drill-down type support by bootstrap-calendar.

See below for a simple example:

// Create a Month-view Calendar initialised to Oct 2013
monthCalendar = $("#monthCalendar").calendar({
  events_url: "url",
  view: "month",
  day: "2013-10-01"
});

// Create a Week-view
weekCalendar = $("#weekCalendar").calendar({
  events_url: "url",
  view: "week",
  day: "2013-09-23"
});

// Now, if we attempt to use monthCalendar.navigate it will behave incorrectly
monthCalendar.navigate("next"); // This will not seem to load the next month
monthCalendar.navigate("next"); // This will load the next month!

I dug into things using the Chrome debugger and noted that during the this._init_position() call during the construction of the weekCalendar object that the Date instance pointed to by this.position.start was the same as the Date instance pointed to by the defaults.position.start.

The result of this was that the .start and .end values for monthCalendar get over-written during the constructon of the weekCalendar and result in the monthCalendar having .start and .end values that do not match what it was configured with initially.

This in turn causes the navigation feature to behave erratically.

I was able to circumvent this issue as follows:

// Create a Month-view Calendar initialised to Oct 2013
monthCalendar = $("#monthCalendar").calendar({
  events_url: "url",
  view: "month",
  day: "2013-10-01",
  position: {
    start: new Date(),
    end: new Date()
  }
});

// Create a Week-view
weekCalendar = $("#weekCalendar").calendar({
  events_url: "url",
  view: "week",
  day: "2013-09-23",
  position: {
    start: new Date(),
    end: new Date()
  }
});

// Now, if we attempt to use monthCalendar.navigate it will behave correctly
monthCalendar.navigate("next"); // This will load the next month!

The underlying issue here is that jQuery.extend does not really support a true deep-copy it seems and is unable to clone instances of objects like Date when performing a deep-copy.

I would recommend that the values for defaults.position.start and defaults.position.end be set to null and then initialised to a new Date() instances following the call to jQuery.extend in the Calendar constructor function.

Calendar reload issue (when changing views)

The calendar is not reloading its event when changing from one view to another.
Steps to reproduce the problem:

In the "month" view... (note the 3 events)

(in background, did a calendar.set_options({ view: 'year' }); and then calendar.render())
change to the "year" view...(the 3 events are still there)

(now, in background, did a calendar.navigate('today'))
The calendar will attempt to show the year that "today" is in... (Note the 3 events again)

After a small delay, other 2 events show up, in August. Those events are real, they exist in my database, but the calendar didn't show them when I set the view.

When calendar.set_options() is called and the view is changed (a setViewMode() would be better, wouldn't it?), the calendar should reload its content.

starting date on the calendar

hi serhio,
this is great calendar for bootstrap.
i've trying to work on implentation the calendar to my project.
i'm making an meeting room reservation system, in which the calendar showing the event that called from the database.
but i kinda stuck at modifying the starting date on the calendar.
when the calendar opened at my system, it always showing 11 week of year 2013 (the event showing march 2nd week).
where do i modify the script so the system starting on today date? i know that i could access today date with clicking on today button, but i want the system to start showing today date as default.
and for the events.json.php i've tried to make some json data for the system to catch. but the system couldn't get the output.
as i tinker with the output, the calendar is accepting data that formatted as string (not json).
kindly need your enlightment on this serhio, thank you.

HowTo push more data in events array/object

It seems I'm not able to display extra data I added to the json file.
I was able to show it on the right hand list but unable to also get data to the event list inside the calendar.

I suppose the function should be 'events' or 'event' but I struggle to find where the data gets filled into '$(event).data('event-class')' for example.

I hope you can point me to the right file.

There is no TIME to display?

I suppose that my start/end time is NOT used to display.
Can you believe it?

Need flexibility in ways in which events can be added to the calender

1. Ajax call should be optional
   Loading events from a local variable might be a better option in certain scenarios.
2. Need a parse function before ajax to tweak the parameters for this particular plugin.
   Refer: http://backbonejs.org/#Collection-parse

Starting on Monday

Great calendar!

It looks like if I set the calendar to start on Monday, first_day: 1, September 2013 is missing it's first day.

year view broken in bs3 branch

the lines are all over the place.

Global language variable may be overwritten

Having a global variable called language is not the best solution: what if another component on the page needs this variable or overwrites it?
This issue is strictly associated to #37

didn't work on google chrome

why??

Day start/end bug found, fix provided

Hi,

You calendar is awesome but I've found a bug in that a day's time range (start and end) were only 86400 milliseconds apart rather than 86400000 milliseconds. This means that single day events were not showing in the month view. The fix needs to be applied in calendar.js line 272.

Hope this is helpful. :-)

Calendar view responsiveness

First of all, this calendar looks great. Thanks for putting this project up! I would definitely want to use something like this for an application or two I have in mind.

However, I couldn't help but notice that in the demo when clicking any of the top right buttons, it takes a few seconds for the screen to update the calendar. Sometimes, certain actions seem worse than other times, though.

If you switch between Year/Month/Week, you will can see the delay in effect. Compare to something like http://arshaw.com/fullcalendar/. Probably an unfair comparison, as that seems like a mature jquery calendar.

Is this expected behavior for now? I just wanted to open an issue to start discussion on why this might be the case, etc.

Template paths should be configurable

A templateRoot: option can take a directory path as an argument and look for templates in there, rather than just tmpls folder

Add raise issue button to demo site so we do not have it in comments.

Internet Explorer 8 compatibility

Could you add IE8 compatibility? I saw this thread on Stackoverflow: http://stackoverflow.com/questions/16361555/underscore-templates-failing-with-unexpected-identifier-in-ie-8 , and I'm having the same issues. Could you be using reserved keywords in the templates?

bootstrap-calender in Ruby on Rails

What needs to be done for this calendar to work in ruby on rails.

I copied calendar.js, calenader.min.js, bootstrap.min.js, underscore-min.js however get ReferenceError: _ is not defined not defined in calendare.min.js.

Is there something I am missing?

Break breaks closure compiler

Hi Sergey

I tried to compile/compress calendar.js with the closure compiler. It raises a warning telling that break is an invalid property id.
Even if everything works fine, but what about renaming this break to something like stopCycling or so?

New translation strings problem

Having a global language variable holding all the translations for the current language may be problematic in case we need to add another translatable string.
For instance, if the calendar needs a new hypothetical title_weekday key of the language JavaScript object, then all the current translations must be updated to contain it.
A better solution could be to have a language dictionary (in en_US?) integrated in the base calendar.js file, with all the keys. Then Calendar should parse the localization files and override the English strings with the localized ones.
I'm thinking to something like:

function Calendar(params, context, localizedStrings) {
   this.localization = $.extend({}, defaultLocalization, localizedStrings);
}

This issue is strictly associated to #36