CODEWITHSUNDEEP
javascriptruby-on-railsfullcalendar
Richlewis
Richlewis

Reputation: 15384

rails 3 Full Calendar Javascript/Jquery

I am tackling the Rails 3 Full calendar for my site. I am a newbie but am getting there slowly :)... I have read the documentation and can see that

 $.fullCalendar.formatDate( date, formatString [, options ] ) -> String

is the option to format the date layout ( I think ). As I am new to javascript/jquery i was wondering if anyone could show me how to implement my date displayed for the week and day view as DD/MM/YYYY. If you could explain i would be very appreciative..

Upvotes: 0

Views: 1088

Answers (1)

Mishaux
Mishaux

Reputation: 338

I believe what you found there is just a function for formatting a date for output in some specific location. For example, if you wanted a js alert dialogue to show a date object you might write

alert('This date object is: ' + date);

Which would create a dialogue showing:

This date object is: Mon Apr 02 2012 07:45:00 GMT-0600 (MDT)

The function you found there would allow you to format that date output string like this:

alert('This date object is: ' + $.fullCalendar.formatDate( date, "m-d-yy h:m" ));

Which would produce a dialogue that read:

This date object is: 15-2-12 7:15

I think maybe the option you are looking for is columnFormat

http://arshaw.com/fullcalendar/docs/text/columnFormat/

This allows you to format the date readout at the top of the columns. In your case, add this option to your initialization which will start something like this:

$('#calendar').fullCalendar({
              editable: true,
              header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
              },
              columnFormat: {
                  day: 'd/MM/yyyy',
                  week: 'd/MM/yyyy'
              },
              defaultView: 'agendaWeek',
              height: 500,
              slotMinutes: 15,
              loading: function(bool){
                  if (bool)
                      $('#loading').show();
                  else
                      $('#loading').hide();
              },
              events: "/events/get_events",
              timeFormat: 'h:mm t{ - h:mm t} ',
              dragOpacity: "0.5",
etc...

Check out all the Text/Time Customization options for ways to customize other parts of the calendar

http://arshaw.com/fullcalendar/docs/text/

Upvotes: 1

Related Questions