| Issue 167: | Mini calendar to control main calendar | |
| 27 people starred this issue and may be notified of changes. | Back to list |
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
Nov 9, 2009
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
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
Issue 134 has been merged into this issue.
Jan 20, 2010
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:
Feb 5, 2010
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
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
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
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
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
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
(No comment was entered for this change.)
Status:
MaybePlugin
Aug 13, 2013
(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
Issue 1385 has been merged into this issue.
Aug 18, 2013
Issue 1479 has been merged into this issue.
Jun 7, 2014
Issue 2037 has been merged into this issue.
Jul 3, 2014
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
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 |