My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
Issue 167: Mini calendar to control main calendar
27 people starred this issue and may be notified of changes. Back to list
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by incontro...@gmail.com, Nov 4, 2009
I am trying to build an interface like Apples iCal, where there is a small
"Month" controller on the bottom left. 

It would be great if we could utilize full calendars existing code to
generate this calendar.. 

Mini cal would read same events list and give the td for that date a
"hasEvent" class (See this is already an excepted improvement), but not
display the events on the mini-cal. 

clicking on a day would call gotoDate for that date in the main "Parent"
calender. 

Simple control to go forward and back a month.. 
Nov 4, 2009
#1 gle...@gmail.com
The way Google calendars use the small calendar to select months, weeks and days is
nice and something similar should be added to fullCalendar. For now the day view of
fullCalendar is kind of pointless because there's no fast way to select a day unless
you go back and forth from month view to week view to day view... 
Nov 9, 2009
#2 mcpata2...@gmail.com
I will suggest you to consider using the jQuery UI datepicker (or any calendar 
plugin for jQuery) for the small calendar and hook them with FullCalendar.js which 
manipulate event visuals. If there were too many application dependency in 
FullCalendar.js, it will degrade its flexibility.
Nov 10, 2009
Project Member #3 adamrs...@gmail.com
i agree about how this feature would be useful. i also agree that it might be best if
you have a jqueryui datepicker that hooks up to fullcalendar's api to do this.

this might be best as an 'add-on'. will think about this more when i start making the
add-on system
Summary: Mini Calender to control Main Calender.
Labels: -Type-Defect Type-Enhancement
Nov 27, 2009
Project Member #4 adamrs...@gmail.com
 Issue 134  has been merged into this issue.
Jan 20, 2010
#5 sneed...@gmail.com
i was able to accomplish this exact thing using a jquery datepicker.
here's the code I used to tie it in:

$j('#miniCalendar').datepicker({
    dateFormat: 'DD, d MM, yy',
        onSelect: function(dateText,dp){
            $j('#calendar').fullCalendar('gotoDate',new Date(Date.parse(dateText)));
            $j('#calendar').fullCalendar('changeView','agendaDay');
           }
    });
the important thing is to set the dateFormat property correctly so that you can parse
it correctly for the goToDate call.

Here's a screenshot of my calendar:

calendar with mini calendar control.png
33.4 KB   View   Download
Feb 5, 2010
Project Member #6 adamrs...@gmail.com
thanks sneed424.

another article that describes this: 
http://weblogs.asp.net/gunnarpeipman/archive/2010/02/02/linking-jqueryui-datepicker-
and-fullcalendar.aspx
Feb 25, 2010
#7 DonaldWB...@gmail.com
The link is now broken, and I am getting curious effect.

The first time I change the date with the mini calendar I get a page flash.

Every time after the first, no page flash.

Anyone have any ideas?
Feb 27, 2010
#8 sneed...@gmail.com
I've experienced that as well. I think it has something to do with the call to 
changeView but I haven't been able to nail down the cause.
Mar 15, 2010
Project Member #9 adamrs...@gmail.com
the url isn't broken, its just mistakenly split across 2 lines. c&p both parts into the url bar.

donald+sneed, could you post an example of this flashing thing happening so i can get a better picture?
Jul 21, 2010
#10 mikemoto...@gmail.com
I am trying to figure out how to add a custom class to days in the jquery ui datepicker that have events based on fullcalendar. I need to color the dates with events. Any thoughts?
Aug 21, 2010
#11 Hor...@gmail.com
That is easy, just crossreference the date from the beforeShowDay function of the datepicker with the one from the event data and set a class for it when there is an event.

You guys also forgot that the solution above is only half right. In the week view you have the change the view to stay in week, and not again to day.


dateFormat: 'yy-m-d',
onSelect: function(dateText, inst)
			{				
				var date = dateText.split('-');
				
				$('#calendar-full').fullCalendar('gotoDate',date[0],date[1]-1,date[2]);
				var view = $('#calendar-full').fullCalendar('getView');
				
				if (view.name == 'agendaWeek')
					$('#calendar-full').fullCalendar( 'changeView', 'agendaWeek' );
				else
					$('#calendar-full').fullCalendar( 'changeView', 'agendaDay' );
			}
Oct 7, 2010
Project Member #12 adamrs...@gmail.com
(No comment was entered for this change.)
Status: MaybePlugin
Aug 13, 2013
Project Member #13 adamrs...@gmail.com
(No comment was entered for this change.)
Summary: Mini calendar to control main calendar (was: Mini Calender to control Main Calender.)
Status: Accepted
Labels: -Type-Enhancement -Priority-Medium Type-Feature
Aug 15, 2013
Project Member #14 adamrs...@gmail.com
 Issue 1385  has been merged into this issue.
Aug 18, 2013
Project Member #15 adamrs...@gmail.com
 Issue 1479  has been merged into this issue.
Jun 7, 2014
Project Member #16 adamrs...@gmail.com
 Issue 2037  has been merged into this issue.
Jul 3, 2014
#17 Catholic...@gmail.com
At least with version 1.6.4 it isn't necessary to change the view when changing the date. Here is my code:

//fullCalendar//
dayClick: function(date, allDay, jsEvent, view) {
$(datePickerDiv).datepicker("setDate", date);
}

//datePicker//
onSelect: function(dateText, inst) {
   var date = $(datePickerDiv).datepicker("getDate");  // works independently of the formatting of the date
   $(calendarDiv).fullCalendar('gotoDate', date);
},
onChangeMonthYear: function(year, month, inst) {
   if ($(calendarDiv).fullCalendar('getView').name === 'month') {
      $(calendarDiv).fullCalendar('gotoDate', year, month - 1);
   } else {
      $(calendarDiv).fullCalendar('prefetchMonth', new Date(year, month - 1, 2));
   }
},
beforeShowDay: function(date) {
   // code determining the class for a day, according to whether there are special events on that day
   ...
}

// The "prefetchMonth" is a call I added to fullCalendar to make it possible to color dates with special events in time periods that are not yet actually displayed in fullCalendar, but which the user is viewing in the mini calendar.
Aug 21, 2015
Project Member #18 adamrs...@gmail.com
Discussion for this issue has moved to the following URL:
https://github.com/fullcalendar/fullcalendar/issues/438

This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event.

Happy coding,
Adam
Status: ExportedToGithub
Sign in to add a comment

Powered by Google Project Hosting