我正在使用fullcalendar。日历当前将突出显示我点击的那一天,然后转到agendaDay视图。这就是我要的。我遇到的问题是当我回到月视图时,我选择的那天没有突出显示。我希望这个功能是为了方便客户。以下是一些屏幕截图。JLS 5.1.7
可以在这里找到Css。如果您需要任何其他信息,请与我们联系。
/**
* calendarDemoApp - 0.9.0
*/
var calendarDemoApp = angular.module('calendarDemoApp', ['ui.calendar', 'ui.bootstrap']);
calendarDemoApp.controller('CalendarCtrl',
function($scope, $compile, $timeout, uiCalendarConfig, $http) {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var dateSaver = '';
$scope.changeTo = 'Hungarian';
/* event source that pulls from google.com */
$scope.eventSource = {
url: "http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic",
className: 'gcal-event', // an option!
currentTimezone: 'America/Chicago' // an option!
};
/* event source that contains custom events on the scope */
$scope.events = [
//{title: 'Click for Google',start: new Date(y, m, 28, 10),url: 'http://google.com/'}
];
/* event source that calls a function on every view switch */
$scope.eventsF = function (start, end, timezone, callback) {
var s = new Date(start).getTime() / 1000;
var e = new Date(end).getTime() / 1000;
var m = new Date(start).getMonth();
var events = [{title: 'Feed Me ' + m,start: s + (50000),end: s + (100000),allDay: false, className: ['customFeed']}];
callback(events);
};
/*alert on DateClick */
$scope.alertOnDateClick = function(date, jsEvent, view, start, end, allDay){
//dateSaver = $scope.alertMessage = ('Clicked on: ' + date.format());
dateSaver = date.format();
var today = moment();
var todayCheck = moment(today).format('YYYY-MM-DD');
var selectionStart = date.format();
selectionStart = Date.parse(selectionStart);
today = Date.parse(today);
var view = $('#myCalendar1').fullCalendar('getView');
//alert(dateSaver);
$scope.alertMessage = dateSaver;
/*
dayClicked = dateSaver.substring(8,11);
dayClicked = parseInt(dayClicked);
monthClicked = dateSaver.substring(5,7);
monthClicked = parseInt(monthClicked) - 1;
yearClicked = dateSaver.substring(0,4);
yearClicked = parseInt(yearClicked);
*/
yearClicked = date.format('YYYY');
yearClicked = parseInt(yearClicked);
monthClicked = date.format('MM');
monthClicked = parseInt(monthClicked) - 1;
dayClicked = date.format('DD');
dayClicked = parseInt(dayClicked);
//alert(date);
if(dateSaver == todayCheck || selectionStart > today){
$('#myCalendar1').fullCalendar( 'changeView', 'agendaDay' );
$('#myCalendar1').fullCalendar( 'gotoDate', date.format());
//$http.post
for(timeIncrement = 7; timeIncrement < 23; timeIncrement++){
$scope.events.push({
title: 'Rooms Available [' + 11 + ']',
start: new Date(yearClicked, monthClicked, dayClicked, timeIncrement),
url: 'http://localhost:8000/app/reservationIndex.html'
//url: 'http://steamroom.se.rit.edu/app/reservationOptions.html'
});
}
}
else{
//if(view.name == 'month'){
alert("You have clicked a previous date");
//}
//else{
// alert("You have clicked a previous time slot");
//}
}
};
/* alert on eventClick */
$scope.alertOnEventClick = function( date, jsEvent, view){
$scope.alertMessage = (date.title + ' was clicked ');
};
/* alert on Drop */
$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
$scope.alertMessage = ('Event Droped to make dayDelta ' + delta);
};
/* alert on Resize */
$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view ){
$scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};
/* add and removes an event source of choice */
$scope.addRemoveEventSource = function(sources,source) {
var canAdd = 0;
angular.forEach(sources,function(value, key){
if(sources[key] === source){
sources.splice(key,1);
canAdd = 1;
}
});
if(canAdd === 0){
sources.push(source);
}
};
/* add custom event*/
$scope.addEvent = function() {
$scope.events.push({
title: 'Open Sesame',
//start: new Date(yearClicked, monthClicked, dayClicked),
//end: new Date(yearClicked, monthClicked, dayClicked),
className: ['openSesame']
});
};
/* remove event */
$scope.remove = function(index) {
$scope.events.splice(index,1);
};
/* Change View */
$scope.changeView = function(view,calendar) {
uiCalendarConfig.calendars[calendar].fullCalendar('changeView',view);
};
/* Change View */
$scope.renderCalender = function(calendar) {
$timeout(function() {
if(uiCalendarConfig.calendars[calendar]){
uiCalendarConfig.calendars[calendar].fullCalendar('render');
}
});
};
/* Render Tooltip */
$scope.eventRender = function( event, element, view ) {
element.attr({'tooltip': event.title,
'tooltip-append-to-body': true});
$compile(element)($scope);
};
/* config object */
$scope.uiConfig = {
calendar:{
height: 650,
editable: false,
selectable: true,
header:{
left: 'month',
center: 'title',
right: 'today prev,next'
},
viewRender: function(view){
$('#myCalendar1').fullCalendar('removeEvents');
if(view.name == 'agendaDay'){
$("#myCalendar1 .fc-next-button").hide();
$("#myCalendar1 .fc-prev-button").hide();
$("#myCalendar1 .fc-today-button").hide();
}
else{
$("#myCalendar1 .fc-next-button").show();
$("#myCalendar1 .fc-prev-button").show();
$("#myCalendar1 .fc-today-button").show();
}
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
dayClick: $scope.alertOnDateClick,
timeClick: $scope.alertTest,
eventWipe: $scope.eventWipe
}
};
/* event sources array*/
$scope.eventSources = [$scope.events, $scope.eventSource, $scope.eventsF];
$scope.eventSources2 = [$scope.calEventsExt, $scope.eventsF, $scope.events];
$scope.eventSources3 = [$scope.alertOnDateClick, $scope.alertTest, $scope.eventWipe];
});
/* EOF */
其他Javascript将在fullCalendar.js
中