Issue 2352: show "day" or "week" on fullcalendar when select some "date(DD/MM/YYY)" in date picker
Status:  Invalid
Owner: ----
Closed:  Nov 2014
Reported by ash...@mashaaz.com, Nov 13, 2014


/*--------START LOAD CALENDAR -------*/
      
    function loadCalender(calResources, calEvents,selectedPGroup, newDate, calView){
        var date = newDate;
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();       
        var ProviderGroupId=selectedPGroup;
        var calendar = $('#calendar').fullCalendar({
            header: {
                left: 'today',
                center: 'prev,title,next',
                right: 'resourceDay,resourceWeek'
            },
            
            defaultView: calView,//'resourceDay',
            minTime: '08',
            maxTime: '20',
            
            columnFormat: 
            {
                month: 'ddd',    // Mon
                week: 'ddd M/d', // Mon 9/7
                day: 'hh(:mm) tt',  // Monday 9/7
                resourceDay : 'hh(:mm) tt '
            } 
            ,
            firstDay: 1,
            year: y,
            month: m,
            date: d,
            editable: true,
            selectable: true,
            firstHour:6,
            selectHelper: true,
            resources: calResources,
            events: calEvents,
            theme:true,
            slotMinutes: '60',
            ignoreTimezone: true,/*
            // Event called when we click on Calendar.
            select: function (start, end, allDay, jsEvent, view, resource) {
                var title = prompt('event title:');
                if (title) {
                    calendar.fullCalendar('renderEvent',
                            {
                                //title: title,
                                start: start,
                                end: end,
                                //allDay: allDay,
                                resource: resource.id
                            },
                            true // make the event "stick"
                        );
                }
                calendar.fullCalendar('unselect');
            },*/
            resourceRender: function (resource, element, view) {
                // this is triggered when the resource is rendered, just like eventRender
            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view,resource) {
                // alert('HI '+ event.title + ' ' + event.resource + ' '+ dayDelta + ' ' + minuteDelta);

            var r = confirm("Service Order moved to "  + event.start + ". By clicking OK you are confirming the reallocation of the Service Order. If not, then click Cancel to undo any changes.");
            if (r == true)
            {
                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.DispatchConsoleCntrl2.reassignServiceOrder}',
                event.title,event.resource.toString(),dayDelta,minuteDelta,  
                function(result, event){
                    //$( this ).dialog( "close" );
                    window.location.reload();
                }, 
                {escape: true}
                );   
            }
            else 
            {
                    window.location.reload();
            }
            
               //alert('event moved to ' + event.start + ' to ' + event.resource);
            },
            eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
               // alert('event was resized, new endtime: ' + event.end);
            },
            eventClick: function (event, jsEvent, view,resource) {
            // when we click on SO on calendar          
           $("#dialog-form" ).dialog( "open");
           $("#serviceOrder").text(event.title);           
           $("#assignedTo").text(event.resourceName);
           $("#accountName").text(event.account);         
           $("#startDatePicker").hide();
           $("#startHours").hide();
           $("#startMinutes").hide();
           $("#endDatePicker").hide();
           $("#endHours").hide();
           $("#endMinutes").hide();
           $("#startPeriod").hide();
           $("#endPeriod").hide();
           $(".ui-dialog-buttonset").hide();      
            var startDate = event._start;
            var year = startDate.getFullYear();
            var month = startDate.getMonth() + 1;
            var hours= startDate.getHours();
            var minutes = startDate.getMinutes();
            var formatedTime = fomartTimeShow(hours,minutes);
            if(month <= 9)
            month = '0'+month;
            var day= startDate.getDate();
            if(day <= 9)
            day = '0'+day;
            var prettyStartDate = month +'/'+ day +'/'+ year +' '+formatedTime;             
            var endDate = event._end;
            var year = endDate.getFullYear();
            var month = endDate.getMonth() + 1;
            var hours= endDate.getHours();
            var minutes = endDate.getMinutes();
            var formatedTime = fomartTimeShow(hours,minutes);
            if(month <= 9)
            month = '0'+month;
            var day= endDate.getDate();
            if(day <= 9)
            day = '0'+day;
            var prettyEndDate = month +'/'+ day +'/'+ year+' '+formatedTime; ; 
           $("#lblStartDate").text(prettyStartDate);
           $("#lblEndDate").text(prettyEndDate);
           $("#serviceName").text(event.name);
           $("#serviceDescription").text(event.description);           
           $("#lblStartDate").show();
           $("#lblEndDate").show();
           $("#serviceName").show();
           $("#serviceDescription").show();    
            },
            eventRender: function (event, element, view) {
                if(event.account){
                        element.find('.fc-event-title').append("<br/>" + event.account);
                    }
                element.find('.fc-event-time').hide();
            },
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function (date, allDay, ev, ui, resource) { // this function is called when something is dropped
                // retrieve the dropped element's stored Event Object
                var originalEventObject = $(this).data('eventObject');
                originalEventObject.resource = resource.id;
                
                // we need to copy it, so that multiple events don't have a reference to the same object
                var copiedEventObject = $.extend({}, originalEventObject);
                
                // assign it the date that was reported
                copiedEventObject.start = date;
                copiedEventObject.allDay = allDay;
                
                $( "#dialog-form" ).dialog( "open");
                $("#lblStartDate").hide();
                $("#lblEndDate").hide();
                $("#serviceName").hide();
                $("#serviceDescription").hide();
                $("#serviceOrder").text(originalEventObject.serviceOrder);
                $("#assignedTo").text(resource.name);
                $("#hdnAssignedTo").val(resource.id);
                $("#hdnProviderGroup").val(ProviderGroupId);
                $("#lblServiceName").hide();
                $("#lblServiceDescription").hide();
                $("#accountName").text(originalEventObject.accountName);
                 
           
            var myDate = date;
            var year = myDate.getFullYear();
            var month = myDate.getMonth() + 1;
            if(month <= 9)
            month = '0'+month;
            var day= myDate.getDate();
            if(day <= 9)
            day = '0'+day;
            var prettyDate = month +'/'+ day +'/'+ year;      
           $("#startDatePicker").val(prettyDate);
           $("#startDatePicker").show();
           $("#startHours").val(date.toLocaleTimeString().split(':')[0]);
           $("#startHours").show();
           $("#startMinutes").val(date.toLocaleTimeString().split(':')[1]);
           $("#startMinutes").show();
           $("#endDatePicker").val(prettyDate);
           $("#endDatePicker").show();
           $("#endHours").val(date.toLocaleTimeString().split(':')[0]);
           $("#endHours").show();
           $("#endMinutes").val(date.toLocaleTimeString().split(':')[1]);
           $("#endMinutes").show();
           $("#startPeriod").val(date.toLocaleTimeString().split(' ')[1]);
           $("#endPeriod").val(date.toLocaleTimeString().split(' ')[1]);
           $("#startPeriod").show();
           $("#endPeriod").show();
           $(".ui-dialog-buttonset").show();
              
                // render the event on the calendar
                // the last `true` argument determines if the event "sticks"
                $('#calendar').fullCalendar('renderEvent', copiedEventObject, false);
                
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) {
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                }
            },
            windowResize: function (view) {
                calendar.fullCalendar('option', 'height', $(window).height() - 40);
            }
        });
        
                   
      $('span:contains(today)').parents('tr').filter(':first').after('<td colspan="3" style="background-color:#ccc; padding:5px 10px;"><a href="javascript:void();" style="float:left; margin:0px 0px 0px 0px; border-radius:5px; text-decoration:none; color:#000; padding:10px 10px 10px 40px;  background:url({!URLFOR($Resource.MapMarkers, 'markers/datepick.png')}) left no-repeat #f9f9f9; background-position: 5px 3px; background-size: 28px 28px;">Pick Date</a></td>'); 


      
      }
      
  $(function( ) {
        $( "#datepicker" ).datepicker({
            altField: "#alternate",
            altFormat: "DD,  MM d, yy" ,
            changeMonth: true,
            changeYear: true,
            
            dateFormat: 'dd-mm-yy',
                clickInput: true, 
                showOn: 'button',
                buttonImage: '{!URLFOR($Resource.MapMarkers, 'markers/datepick.png')}',
                buttonImageOnly: true,   
                
                onSelect: function(dateText, inst) {
                        // I don't know if this conversion works, maybe a string parsing is needed
                        var date = new Date(dateText);
                        $('#calendar').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate()); 
                }
           
            
           
            
        });
        
        $('#datePickerImage').mouseover(function() {
            $('#date_picker').datepicker('show');
        });

        $('#datePickerImage').mouseout(function() {
            $('#date_picker').datepicker('hide');
        });

        
    });

Nov 15, 2014
Project Member #1 adamrs...@gmail.com
(No comment was entered for this change.)
Status: Invalid