#213 Calendars (revised)

Fantastic. Timely. I'm working at revising an app we use to schedule assignments in our small photo business. (Internal use, not client-facing.) I'm using FullCalendar for the calendar but I am really getting frustrated by not being able to find a dateTIMEpicker that's as clean and sophisticated as the jQueryUI datepicker. I don't care much for the ones I've seen that use a slider for the hour/minute, and the one I used for the original version of this app is pretty out of date. Anyone have any suggestions? I'm fine with a select widget for hour/minute, but it needs to be integrated within the popup calendar widget. I'm about ready to settle for a simple text entry field (with Chronic) instead, ispired by the Virtual Attribute revised episode from a short while back.

I really love what you have demonstrated about making a calendar from scratch. I think I'll stick with FullCalendar for my project though, because I need event blocks to overlap (to indicate schedule conflicts) and to be able to colorize different types of events (confirmed, tentative, staff appointments...)

Thank you so much, Ryan!

Great episode! It would have been nice to see you limit the @articles query to grab articles in the current month as well, but that's not too hard.

Awesome! I have all of the full screen JS calendars I've seen. This is nice and clean and can easily be customized.

Great job.

If you are using twitter bootstrap in your app you might find this calendar very handy: http://www.eyecon.ro/bootstrap-datepicker/ It integrates nicely with bootstrap design and seems to have the same functionality as the one from jquery ui.

Struct.new gives me a superclass mismatch
I fixed this by removing the < Struct.new and adding
attr_accessor :view, :date, :callback

Also of possible use: I recently had to add a monthpicker to a client's Rails project, allowing the user to select a month and a year, but no day. There's a useful add-on for this functionality here: https://github.com/thebrowser/jquery.ui.monthpicker

Thank you so much for this episode!
I'm also happy with another great jQuery plugin named fullcalendar.
It has Lots of support such as events from JSON and is updated frequently, theck it out! : )

Kalendae is a great alternative to including jQuery UI for just a date picker. I wrote a gem to provide as an asset for Rails 3.1+

https://github.com/sdball/kalendae_assets

http://rakeroutes.com/blog/add-kalendae-to-your-rails-app-with-kalendae-assets/

I am used http://www.eyecon.ro/bootstrap-datepicker/ it is verry usable

If your field is a datetime field instead of a date field (the example in this tutorial :published_on is a date field), then you can adjust your controller as per this answer on StackOverflow

No one mentioned it, but if you sent type="date" HTML5 compatible browsers will give you a datepicker without any need for javascript.

i would like to see how u insert a datepicker when u have to change the format to the user, but to save on the database u have to change the format back to rails.

its easy to change the format from / to - only, i really got trapped when i need to format 2012-06-31 to 31/06/2012 to the user and save correctly to the database... thats what i really need to know

This is weird. I have a model called calendar_event. So, in the .coffee file I have

jQuery ->

$('#calendar_event_starts_at').datepicker
dateFormat: 'yy-mm-dd'

which isn't firing datepicker as expected. Does the multi-word model have an effect on jQuery? I've used datepicker before without issue, but all models have been of one word.

Thanks,

Steve

I get ArgumentError: wrong number of arguments (1 for 0) for this call:

first = date.beginning_of_month.beginning_of_week(START_DAY)

If I try it in the console it also gives me the same error. Date.today.beginning_of_month.beginning_of_week(:sunday)

Awesome. Why don't you wrap your calendar helpers into gem?

Any recommendations for generating an .ics file for the date selected? The ri_cal library on github appears to be getting no love. And from the examples, I am not quite sure where to put the code (this video suggests creating a helper).

Any assistance is very appreciated.

Great episode as always...

i implement this episode to my event model. Some events have a duration of more than 1 day...by example event "A" is 3 day's. Has anybody implement this feature yet. So with 2 columns in the DB 'starts_at' and 'ends_at' and the calendar is filled in between this data?

Ciao..remco

Great episode. I've followed it to the letter, and the datepicker appears, but the options to the datepicker aren't taking effect. I've looked carefully at ordering, and the output javascript file which looks great with options present. I can repost with more code if desired. I am also using twitter-bootstrap-rails and jquery-fileupload-rails gems and wonder if those might be causing conflicts. This should just work. Thanks!

Is there a recommended way to add events to a Google Calendar account?

once again very useful Ryan, thank you!

For what it's worth, if you are using the refinery-calendar with refinerycms and want to embed a calendar grid, the month-to-month navigation like this won't work, and will throw a routing error when you load the page:

=link_to "<", date: @date.prev_month

Instead, you'll need

=link_to "<", refinery.url_for(date: @date.prev_month)

which works just fine. Something of a quirk in Rails' mountable engines routing.

—Steve

Ryan -- you briefly mentioned the default format of datepicker was mm/dd/yyyy, and changed to something ruby can parse, like yyyy-mm-dd. I wanted the date format displayed as an American date in forms (and elsewhere).

I am sure I have an inelegant solution, so any recommendations are welcome.

To handle date parsing, I used the https://github.com/jeremyevans/ruby-american_date gem, which make Date.parse work as it did in ruby 1.9.2, accepting the mm/dd/yyyy format.

For the form field, I needed to handle both edit and create:

  <div class="field">
    <%= f.label :begins_on, "Start Date" %>
    <%= f.text_field :begins_on, :value => date_formatted(@my_model.begins_on || Time.now), :data => {:behavior => 'datepicker'} %>
  </div>

The date_formatted method is a helper in application_controller.rb like this

  helper_method :date_formatted
  def date_formatted(datetime)
    return nil if datetime.blank?
    datetime.strftime("%m/%d/%Y")
  end

and the JS is done (definitely inelegantly) in an application-wide file

$ ->
  `$(document).on("focus", "[data-behavior~='datepicker']", function(e){
      $(this).datepicker({"format": "mm/dd/yyyy", "weekStart": 1, "autoclose": true});
  });`

Hope this is helpful for someone with similar requirements.

-- Tom

Please help!! I have followed the tutorial verbatim but the published_on date is not showing up in calendar view. Unless i put this code in articles_controller.rb and it only shows entries for current days only. @articles_by_date = Article.all.group_by {|i| i.created_at.to_date}.
Is there a way to show published_on date for current/past and future dates also?

Any ideas on how to use Ryans scheduler with ajax calls to update month instead of the page reload links.

so I have a datetime field in my modle and I have seperated them by:

%p
    = f.label :event_date
    = f.date_select :event_date
    %br
  %p
    = f.label :event_time
    = f.time_select :event_date, :minute_step => 15, :ignore_date => true, :ampm => true
    %br

and this works fine. I have then change the date select to a f.text_field and applied whats discussed in the video. and I produce this error:

1 error(s) on assignment of multiparameter attributes

{"utf8"=>"✓",
 "authenticity_token"=>"YHlnywsS5yAA2gCp4iU+RQNGEC1i+VzMz2FQab8r+a0=",
 "event"=>{"event_name"=>"",
 "event_date"=>"2012-12-21",
 "event_date(4i)"=>"14",
 "event_date(5i)"=>"00",
 "participants"=>"5"},
 "commit"=>"Create Event"}

If I comment out the f.time_select line like so:

%p
    = f.label :event_date
    = f.text_field :event_date
    %br
  %p
    = f.label :event_time
    /= f.time_select :event_date, :minute_step => 15, :ignore_date => true, :ampm => true
    %br

everything works fine except that the time is saved as 00:00:00 of course. Any one have any clue on how to get this working right?

I'm using haml and had to change the call to calendar to be of the display format (I had to do = calendar do |date| instead of - calendar do |date|). Is this expected? Ryan had the call to calendar marked as nondisplaying code, but had it the other way initially.

I was getting a wrong argument error (1 for 0) on <%= calendar ....%> and upgrading from rails 3.1.8 to rails 3.2 solved that issue.

Tip: I had to restart my rails server after I added the "require" lines to the CSS and javascript files. Rails was throwing an error that it could not find those files until I did this.

It is articles_controller.rb not calendars_controller.rb

I want to change the heading of calendar as: Sun, Mon and so on. what is the idea?

This is great, i love that it isn't a gem so I'm more likely to read the code & learn.

I'd like to add to this to allow for events that occur over multiple days. Does anybody have any advice on how to go about this?

I'm combining this with dynamic forms from episode #403. The jQuery doesn't fire for the properties when looping through the following lines...

<%= f.fields_for :properties do |builder| %>
  <% @product.product_type.fields.each do |field| %>
    <%= render "products/fields/#{field.field_type}", field: field, f: builder %>
  <% end %>
<% end %>

The datepicker works perfectly for anything being edited that isn't within properties. Troubleshooting it seems that the issue is jQuery being called/attached/whatever-term-you-want before the builder finishes. If I add the following lines, the name will trigger its changes, but the date will not.

# For the sake of testing, I've hard-wired the id names in to eliminate passing the id names as being the problem.
jQuery ->
$("#hardware_model_name").change ->
alert "name has been changed"

jQuery ->
 $("#hardware_model_properties_test_date").change ->
   alert "date has been changed"

How does one properly include the jQuery for render calls?

Hi all,

my jquery datepicker didn't show without page refresh. I followed the exact step and I don't understand why. Any Idea please.

This is awesome. The helper class is just fantastic - very flexible and easily extendible.

Thanks Ryan.

I have successfully implemented the calendar with a grouping by start date. However, my events span over weeks. How can I convert my events to span from start date to end date?

Thanks!

I figured out the issue with coffeescript not woking properly. On a Rails 4 app you will run into problems where it appears there is some conflict with turbolinks. Just use jquery.turbolinks and you should be good. Find the solution here: http://stackoverflow.com/questions/17881384/jquery-gets-loaded-only-on-page-refresh-in-rails-4-application

The calendar is working great but when i deploy it (using Heroku), the current date is wrong. It's set to a day ahead. What's wrong??

Hey guys - i've been trying to do this for a couple of days now and haven't been getting anywhere. I have an advertisers view - i can see all advertisers i've created. I want to be able to select a date/date range at the top of the advertisers list and show advertisers for a particular day/date range. I'm sure there is a way to modify this to be able to do that. I've been using the created_at method and have even looked at by_star gem. not sure how to generate the different views though - I'm new in rails so still unsure of how everything works. Any help is appreciated. Thanks in advanced.

First. I'm new to rails. Besides that, I could make it just fine. I even figured out how to show just a week, instead of the hole month.
But I need to create another table inside each day, with the hours of the day On the left, and the tasks for the respective hour on the right. Can anyone help me, pretty please?

hi everyone , this is the first time I ever post something here but before I proceed I need to thank every one kind soul that takes the time to help others, like me, not so experienced; thank you thank you thank you...now I have an app that before I add the code above(calendar) was working fine but now it only works on localhost...I am assuming this something related to heroku so
I looked at heroku logs looking for some hints but I can't figure it out...here is the logs9 at least the first 5 lines)

Starting process with command bin/rails server -p 4543 -e $RAILS_ENV
2013-12-02T22:10:36.246379+00:00 app[web.1]: /app/config/application.rb:5:in <top (required)>': undefined local variable or methodconfig' for main:Object (NameError)

This helper should go down in the Rails Gallery of Art/Hall of Fame- It looks so simple, but there so much going on right in front of your face.... I have revisited it several time to remember all of the mechanisms. These patterns have helped me trim a lot ofugly out from my views. Thanks!!!

If your calendar isn't showing up, make sure you use <%= calendar instead of <% calendar

<div id="articles">
<%= calendar do |date| %>
<%= date.day %>
<% end %>
</div>

hi everyone I am rails beginner I need some modifications in the calendar how do change this calendar with link that when I click an any date it has to show the corresponding day below the calendar.....please share your ideas...

Hey everybody. It's 2014, and as this episode is > 2 years old, a couple things have changed with the jquery-ui-rails gem:

//= require jquery-ui/datepicker

*= require jquery-ui/datepicker

Source: https://github.com/joliss/jquery-ui-rails

I hope that helps someone... :)

I did the calendar_helper just like ryan but when i execute it, all it outputs is the text 'false' as well as an empty table... any thoughts where my problem might be?

Does any body know a way of dragging different articles to different days - to change the dates of those particular records?