如何保持我选择的日期突出显示?

时间:2015-10-16 16:20:51

标签: javascript css angularjs fullcalendar

我正在使用fullcalendar。日历当前将突出显示我点击的那一天,然后转到agendaDay视图。这就是我要的。我遇到的问题是当我回到月视图时,我选择的那天没有突出显示。我希望这个功能是为了方便客户。以下是一些屏幕截图。JLS 5.1.7 enter image description here enter image description here

可以在这里找到Css。如果您需要任何其他信息,请与我们联系。 enter image description here

/**
 * 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

0 个答案:

没有答案