@ -7,6 +7,8 @@ $(document).ready(function() {
} ,
} ,
editable : true ,
editable : true ,
eventLimit : true ,
eventLimit : true ,
timeFormat : 'H:mm' ,
axisFormat : 'H:mm' ,
events : function ( start , end , timezone , callback ) {
events : function ( start , end , timezone , callback ) {
$ . ajax ( {
$ . ajax ( {
url : getHelpdeskUrl ( ) + '/internal-api/admin/calendar/?start=' + start + '&end=' + end ,
url : getHelpdeskUrl ( ) + '/internal-api/admin/calendar/?start=' + start + '&end=' + end ,
@ -18,8 +20,6 @@ $(document).ready(function() {
events . push ( buildEvent ( this . id , this ) ) ;
events . push ( buildEvent ( this . id , this ) ) ;
} ) ;
} ) ;
callback ( events ) ;
callback ( events ) ;
//callback w/events here!
} ,
} ,
error : function ( data ) {
error : function ( data ) {
console . error ( data ) ;
console . error ( data ) ;
@ -28,6 +28,9 @@ $(document).ready(function() {
} ,
} ,
dayClick : function ( date , jsEvent , view ) {
dayClick : function ( date , jsEvent , view ) {
displayCreateModal ( date , view . name ) ;
displayCreateModal ( date , view . name ) ;
} ,
eventClick : function ( event ) {
displayEditModal ( event ) ;
}
}
} ) ;
} ) ;
@ -37,6 +40,12 @@ $(document).ready(function() {
$ ( '#create-form .clockpicker' ) . css ( 'display' , hideTimeFields ? 'none' : 'block' ) ;
$ ( '#create-form .clockpicker' ) . css ( 'display' , hideTimeFields ? 'none' : 'block' ) ;
} ) ;
} ) ;
$ ( '#edit-form input[name="all-day"]' ) . change ( function ( ) {
var hideTimeFields = $ ( this ) . is ( ':checked' ) ;
$ ( '#edit-form .clockpicker' ) . css ( 'display' , hideTimeFields ? 'none' : 'block' ) ;
} ) ;
$ ( '#create-form' ) . submit ( function ( e ) {
$ ( '#create-form' ) . submit ( function ( e ) {
e . preventDefault ( ) ;
e . preventDefault ( ) ;
@ -95,6 +104,10 @@ function addToCalendar(id, event) {
}
}
function buildEvent ( id , dbObject ) {
function buildEvent ( id , dbObject ) {
var createTicketDate = null ;
if ( dbObject . createTicketDate != null ) {
createTicketDate = moment ( dbObject . createTicketDate ) ;
}
return {
return {
id : id ,
id : id ,
title : dbObject . title ,
title : dbObject . title ,
@ -102,17 +115,18 @@ function buildEvent(id, dbObject) {
start : moment ( dbObject . startTime ) ,
start : moment ( dbObject . startTime ) ,
end : moment ( dbObject . endTime ) ,
end : moment ( dbObject . endTime ) ,
comments : dbObject . comments ,
comments : dbObject . comments ,
createTicketDate : dbObject. createTicketDate,
createTicketDate : createTicketDate,
assignTo : dbObject . assignTo ,
assignTo : dbObject . assignTo ,
location : dbObject . location
location : dbObject . location
} ;
} ;
}
}
function displayCreateModal ( date , viewName ) {
function displayCreateModal ( date , viewName ) {
$ ( '#create-form input[name="name"]' ) . val ( '' ) ;
var $form = $ ( '#create-form' ) ;
$ ( '#create-form input[name="location"]' ) . val ( '' ) ;
$form . find ( 'input[name="name"]' ) . val ( '' ) . end ( )
$ ( '#create-form textarea[name="comments"]' ) . val ( '' ) ;
. find ( 'input[name="location"]' ) . val ( '' ) . end ( )
$ ( '#create-form input[name="create-ticket-date"]' ) . val ( '' ) ;
. find ( 'textarea[name="comments"]' ) . val ( '' ) . end ( )
. find ( 'input[name="create-ticket-date"]' ) . val ( '' ) . end ( ) ;
var $modal = $ ( '#create-event-modal' ) ;
var $modal = $ ( '#create-event-modal' ) ;
var formattedDate = date . format ( 'YYYY-MM-DD' ) ;
var formattedDate = date . format ( 'YYYY-MM-DD' ) ;
@ -120,16 +134,48 @@ function displayCreateModal(date, viewName) {
. find ( 'input[name="end-date"]' ) . val ( formattedDate ) . end ( ) ;
. find ( 'input[name="end-date"]' ) . val ( formattedDate ) . end ( ) ;
if ( viewName === 'month' ) {
if ( viewName === 'month' ) {
// Select "All Day"
// Select "All Day"
$ ( ' #create-form input[name="all-day"]') . prop ( 'checked' , true ) ;
$ form. find ( ' input[name="all-day"]') . prop ( 'checked' , true ) .end ( )
$ ( '#create-form .clockpicker') . hide ( ) ;
. find ( ' .clockpicker') . hide ( ) ;
} else {
} else {
$ ( ' #create-form input[name="all-day"]') . prop ( 'checked' , false ) ;
$ form. find ( ' input[name="all-day"]') . prop ( 'checked' , false ) .end ( )
$ ( '#create-form .clockpicker') . show ( ) ;
. find ( ' .clockpicker') . show ( ) ;
var formattedTime = date . format ( ' h :mm:ss') ;
var formattedTime = date . format ( ' H :mm:ss') ;
var selectedHour = date . hour ( ) ;
var selectedHour = date . hour ( ) ;
$modal . find ( 'input[name="start-time"]' ) . val ( formattedTime ) . end ( )
$modal . find ( 'input[name="start-time"]' ) . val ( formattedTime ) . end ( )
. find ( 'input[name="end-time"]' ) . val ( date . hour ( selectedHour + 1 ) . format ( 'h:mm:ss' ) ) ;
. find ( 'input[name="end-time"]' ) . val ( date . hour ( selectedHour + 1 ) . format ( 'H:mm:ss' ) ) ;
}
$modal . modal ( 'show' ) ;
}
function displayEditModal ( date ) {
var $form = $ ( '#edit-form' ) ;
if ( date . end === null ) {
// FullCalendar will set the end date to null if it is the same as the start date.
date . end = date . start . clone ( ) ;
}
}
$ ( '#create-event-modal' ) . modal ( 'show' ) ;
if ( date . allDay ) {
$form . find ( 'input[name="all-day"]' ) . prop ( 'checked' , true ) . end ( )
. find ( 'input[name="start-time"]' ) . hide ( ) . end ( )
. find ( 'input[name="end-time"]' ) . hide ( ) . end ( ) ;
} else {
$form . find ( 'input[name="all-day"]' ) . prop ( 'checked' , false ) . end ( )
. find ( '.clockpicker' ) . show ( ) . end ( )
. find ( 'input[name="start-time"]' ) . val ( date . start . format ( 'H:mm:ss' ) ) . end ( )
. find ( 'input[name="end-time"]' ) . val ( date . end . format ( 'H:mm:ss' ) ) . end ( ) ;
}
if ( date . createTicketDate != null ) {
$form . find ( 'input[name="create-ticket-date"]' ) . val ( date . createTicketDate . format ( 'YYYY-MM-DD' ) ) . end ( ) ;
}
$form . find ( 'input[name="name"]' ) . val ( date . title ) . end ( )
. find ( 'input[name="location"]' ) . val ( date . location ) . end ( )
. find ( 'textarea[name="comments"]' ) . val ( date . comments ) . end ( )
. find ( 'input[name="start-date"]' ) . val ( date . start . format ( 'YYYY-MM-DD' ) ) . end ( )
. find ( 'input[name="end-date"]' ) . val ( date . end . format ( 'YYYY-MM-DD' ) ) . end ( ) ;
$ ( '#edit-event-modal' ) . modal ( 'show' ) ;
}
}