2021-07-05 10:05:49 +00:00
window . auto _close _popup = false ;
$ . fn . fullCalendar = function ( args ) {
var self = this [ 0 ]
if ( ! self . calendar _args )
self . calendar _args = args ;
else
args = Object . assign ( self . calendar _args , args ) ;
var calendar = new FullCalendar . Calendar ( self , args ) ;
calendar . render ( ) ;
$ ( window ) . on ( "load" , function ( ) {
calendar . render ( ) ;
} )
this . calendar = calendar ;
self . calendar = calendar ;
$ . fullCalendar = calendar ;
return calendar ;
} ;
function correct _date ( date ) {
var new _date = new Date ( ) ;
new _date . setTime ( date . getTime ( ) + date . getTimezoneOffset ( ) * 60 * 1000 ) ;
return new _date ;
}
FullCalendar . Calendar . prototype . get _all _events = function ( ) {
this . currentData . all _events = [ ] ;
var all _events = this . currentData . all _events ;
if ( this . currentData . eventStore && this . currentData . eventStore . instances ) {
var instances = this . currentData . eventStore . instances ;
Object . keys ( instances ) . forEach ( function ( k ) {
var instance = instances [ k ] ;
var range = Object . assign ( { } , instance . range ) ;
range . start = correct _date ( range . start ) ;
range . end = correct _date ( range . end ) ;
all _events . push ( range ) ;
} )
}
return this . currentData . all _events ;
}
FullCalendar . Calendar . prototype . isAnOverlapEvent = function ( eventStartDay , eventEndDay ) {
eventStartDay = eventStartDay || eventEndDay ;
eventEndDay = eventEndDay || eventStartDay ;
if ( ( typeof ( eventStartDay ) ) . toLowerCase ( ) == "string" )
eventStartDay = new Date ( eventStartDay ) ;
if ( ( typeof ( eventEndDay ) ) . toLowerCase ( ) == "string" )
eventEndDay = new Date ( eventEndDay ) ;
var events = this . get _all _events ( ) ;
for ( var i = 0 ; i < events . length ; i ++ ) {
2022-07-11 07:26:47 +00:00
var eventA = events [ i ] ;
// start-time in between any of the events
if ( eventStartDay >= eventA . start && eventStartDay <= eventA . end ) {
return true ;
}
//end-time in between any of the events
if ( eventEndDay >= eventA . start && eventEndDay <= eventA . end ) {
return true ;
}
//any of the events in between/on the start-time and end-time
if ( eventStartDay <= eventA . start && eventEndDay >= eventA . end ) {
return true ;
}
}
return false ;
2021-07-05 10:05:49 +00:00
}
window . is _chinese = ( I18n && I18n . locale . indexOf ( 'zh' ) != - 1 ) ;
window . datetime _format = is _chinese ? 'y M d h:m b' : 'd M, y h:m b' ;
window . date _format = is _chinese ? 'y M d' : 'd M, y' ;
window . time _format = "h:m b" ;
window . date _time _str _format = 'y/MM/d H:m' ;
2021-09-06 16:45:14 +00:00
window . std _date _format = 'y-MM-d' ;
2022-04-09 12:21:02 +00:00
window . short _day = ( is _chinese ? "d (w)" : "w d" ) ;
window . short _date = ( is _chinese ? "M d (w)" : "w d, M" ) ;
window . short _date _time = ( is _chinese ? "M d (w) h:m b" : "w d, M h:m b" ) ;
2021-07-05 10:05:49 +00:00
window . getDateString = function ( date , format , is _chinese ) {
2022-07-11 07:26:47 +00:00
var months = [ 'Jan' , 'Feb' , 'Mar' , 'Apr' , 'May' , 'Jun' , 'Jul' , 'Aug' , 'Sep' , 'Oct' , 'Nov' , 'Dec' ] ;
var week _days = [ 'Sun' , 'Mon' , 'Tue' , 'Wed' , 'Thu' , 'Fri' , 'Sat' ] ;
if ( is _chinese ) {
months = [ ] ;
for ( var i = 0 ; i < 12 ; i ++ ) {
months . push ( ( i + 1 ) + "月" ) ;
}
week _days = [ "週日" , "週一" , "週二" , "週三" , "週四" , "週五" , "週六" ]
}
var getPaddedComp = function ( comp ) {
return ( ( parseInt ( comp ) < 10 ) ? ( '0' + comp ) : comp )
} ,
formattedDate = format ,
o = {
"y+" : date . getFullYear ( ) + ( is _chinese ? "年" : "" ) , // year
"MM+" : getPaddedComp ( date . getMonth ( ) + 1 ) , //raw month
"M+" : months [ date . getMonth ( ) ] , //month
"d+" : ( is _chinese ? ( date . getDate ( ) + "日" ) : getPaddedComp ( date . getDate ( ) ) ) , //day
"w+" : week _days [ date . getDay ( ) ] , //weekday
"h+" : getPaddedComp ( ( date . getHours ( ) > 12 ) ? date . getHours ( ) % 12 : date . getHours ( ) ) , //hour
"H+" : getPaddedComp ( date . getHours ( ) ) , //hour
"m+" : getPaddedComp ( date . getMinutes ( ) ) , //minute
"s+" : getPaddedComp ( date . getSeconds ( ) ) , //second
"S+" : getPaddedComp ( date . getMilliseconds ( ) ) , //millisecond,
"b+" : ( date . getHours ( ) >= 12 ) ? 'PM' : 'AM'
} ;
for ( var k in o ) {
if ( new RegExp ( "(" + k + ")" ) . test ( format ) ) {
formattedDate = formattedDate . replace ( RegExp . $1 , o [ k ] ) ;
}
}
return formattedDate ;
2021-07-05 10:05:49 +00:00
} ;
2021-09-08 02:10:44 +00:00
var Calendar = function ( dom , property _id , currentView , display _hire _event ) {
2017-01-20 09:02:50 +00:00
2022-02-08 07:26:12 +00:00
var c = this ;
2021-09-08 02:10:44 +00:00
display _hire _event = ( display _hire _event == undefined ? true : display _hire _event ) ;
2017-01-20 09:02:50 +00:00
this . title = $ ( "#current_title" ) ;
2021-07-05 10:05:49 +00:00
this . calendar _dom = $ ( dom ) ;
2017-01-20 09:02:50 +00:00
this . nextBtn = $ ( "#next_month_btn" ) ;
this . prevBtn = $ ( "#prev_month_btn" ) ;
this . todayBtn = $ ( "#today_btn" ) ;
this . modeBtns = $ ( ".calendar_mode button" ) ;
this . refreshBtn = $ ( "#refresh_btn" ) ;
this . dialog = new EventDialog ( c ) ;
this . loading = $ ( '#calendar-loading' ) ;
this . agenda _space = $ ( "#calendar_agenda" ) ;
2021-07-05 10:05:49 +00:00
this . currentView = currentView || "dayGridMonth" ;
2017-01-20 09:02:50 +00:00
this . property _id = property _id ;
this . navigation = $ ( "#navigation" ) ;
this . rangeSelection = $ ( "#range_selection" ) ;
var agendaView = new AgendaView ( c ) ;
var loadeventsonviewchange = false ;
this . initialize = function ( ) {
var date = new Date ( ) ;
var d = date . getDate ( ) ;
var m = date . getMonth ( ) ;
var y = date . getFullYear ( ) ;
2021-07-05 10:05:49 +00:00
var dview = ( c . currentView == "agenda" ? "dayGridMonth" : c . currentView ) ;
c . calendar _dom . css ( "overflow" , "visible" ) ;
c . calendar _dom . fullCalendar ( {
themeSystem : 'bootstrap' ,
2017-01-20 09:02:50 +00:00
editable : false ,
2021-07-05 10:05:49 +00:00
selectable : true ,
width : "100%" ,
events : function ( args , success _callback , fail _callback ) {
var start = args . start ;
var end = args . end ;
$ . ajax ( {
url : "/xhr/property_hires/get_bookings?property_id=" + c . property _id ,
dataType : 'json' ,
type : 'GET' ,
data : {
start : Math . round ( start . getTime ( ) / 1000 ) ,
end : Math . round ( end . getTime ( ) / 1000 ) ,
2021-09-08 02:10:44 +00:00
_ : Date . now ( ) ,
display _hire _event : display _hire _event
2021-07-05 10:05:49 +00:00
} ,
success : function ( json ) {
// json = json.map(function(obj){
// obj.start = new Date(obj.start).toJSON();
// obj.end = new Date(obj.end).toJSON();
// return obj;
// })
success _callback ( json ) ;
}
} ) ;
} ,
// events: 'https://fullcalendar.io/demo-events.json',
2022-07-11 07:26:47 +00:00
headerToolbar : false ,
2021-07-05 10:05:49 +00:00
fixedWeekCount : false ,
initialView : dview ,
2017-01-20 09:02:50 +00:00
loading : function ( bool ) {
2021-07-05 10:05:49 +00:00
if ( bool ) c . loading . show ( ) ;
2017-01-20 09:02:50 +00:00
else c . loading . hide ( ) ;
2021-07-05 10:05:49 +00:00
if ( this . currentData )
$ ( '#current_title' ) . html ( this . currentData . viewTitle ) ;
2017-01-20 09:02:50 +00:00
} ,
windowResize : function ( view ) {
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . refetchEvents ( ) ;
2017-01-20 09:02:50 +00:00
} ,
2021-07-05 10:05:49 +00:00
eventTimeFormat : { hour12 : true , hour : '2-digit' , minute : '2-digit' , omitZeroMinute : true , meridiem : 'narrow' } ,
2022-07-11 07:26:47 +00:00
eventClick : function ( eventClickInfo ) {
var calEvent = { "event" : eventClickInfo . event } ,
originalEvent = eventClickInfo . jsEvent ,
view = eventClickInfo . view ,
2022-07-11 07:30:37 +00:00
el = $ ( eventClickInfo . el ) ;
2022-07-11 07:26:47 +00:00
if ( el . hasClass ( "reserve_btn" ) ) {
window . calEvent = calEvent ;
var start _time = calEvent . event . start ;
var date _str = window . getDateString ( start _time , std _date _format ) ;
c . dialog . hide ( ) ;
var allow _times = calEvent . event . _def . extendedProps . allow _times ;
window . pick _hire _date ( date _str , allow _times ) ;
} else {
c . dialog . dismiss ( ) ;
c . dialog . inflate ( calEvent ) ;
2022-07-25 14:37:16 +00:00
c . dialog . show ( { "x" : originalEvent . clientX , "y" : originalEvent . clientY } ) ;
2022-07-11 07:26:47 +00:00
}
} ,
dateClick : function ( ev ) {
var calendar = this ;
var calendar _dom = $ ( this . el ) ;
if ( c . calendar _dom . hasClass ( "active_picker" ) ) {
var date = ev . date ,
date _str = getDateString ( date , date _time _str _format ) ,
day _element = ev . dayEl ,
jsEvent = ev . jsEvent ;
var time _str = date _str . split ( " " ) [ 1 ] ;
var date _str = date _str . split ( " " ) [ 0 ] ;
calendar _dom . trigger ( "init_time" , [ time _str ] ) ;
calendar _dom . trigger ( "select_time" , [ date _str ] ) ;
}
2021-07-05 10:05:49 +00:00
} ,
views : {
2022-07-11 07:26:47 +00:00
dayGridMonth : {
dayMaxEvents : true
}
2021-07-05 10:05:49 +00:00
}
2017-01-20 09:02:50 +00:00
} ) ;
c . nextBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . next ( ) ;
2022-07-13 04:07:10 +00:00
c . title . text ( c . calendar _dom . calendar . currentData . viewTitle ) ;
2017-01-20 09:02:50 +00:00
} ) ;
c . prevBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . prev ( ) ;
2022-07-13 04:07:10 +00:00
c . title . text ( c . calendar _dom . calendar . currentData . viewTitle ) ;
2017-01-20 09:02:50 +00:00
} ) ;
c . todayBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . today ( ) ;
2022-07-13 04:07:10 +00:00
c . title . text ( c . calendar _dom . calendar . currentData . viewTitle ) ;
2017-01-20 09:02:50 +00:00
} ) ;
c . modeBtns . click ( function ( ) {
c . dialog . dismiss ( ) ;
toggleViews ( $ ( this ) . data ( "mode" ) ) ;
} ) ;
c . refreshBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
if ( c . currentView == "agenda" )
agendaView . refresh ( ) ;
else
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . refetchEvents ( ) ;
2017-01-20 09:02:50 +00:00
} ) ;
var toggleViews = function ( view ) {
c . modeBtns . removeClass ( "active" ) ;
c . modeBtns . each ( function ( ) {
if ( $ ( this ) . data ( "mode" ) == view )
$ ( this ) . addClass ( "active" ) ;
2019-11-09 15:42:19 +00:00
} ) ;
2017-01-20 09:02:50 +00:00
if ( view != "agenda" ) {
if ( c . currentView == "agenda" ) {
// $("#sec1").addClass("span3").removeClass("span7");
$ ( "#sec2" ) . show ( ) ;
// $("#sec3").addClass("span4").removeClass("span5");
agendaView . hide ( ) ;
}
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . changeView ( view ) ;
2017-01-20 09:02:50 +00:00
} else {
// $("#sec1").addClass("span7").removeClass("span3");
$ ( "#sec2" ) . hide ( ) ;
// $("#sec3").addClass("span5").removeClass("span4");
agendaView . inflate ( ) ;
}
c . currentView = view ;
if ( loadeventsonviewchange ) {
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . refetchEvents ( ) ;
2017-01-20 09:02:50 +00:00
loadeventsonviewchange = false ;
}
2021-07-05 10:05:49 +00:00
if ( c . calendar _dom . calendar . currentData ) {
var viewTitle = c . calendar _dom . calendar . currentData . viewTitle ;
if ( view == "timeGridDay" && $ ( '.fc-col-header-cell-cushion ' ) . text ( ) != "" )
viewTitle = $ ( '.fc-col-header-cell-cushion ' ) . text ( ) + ', ' + viewTitle ;
$ ( '#current_title' ) . html ( viewTitle ) ;
}
2022-07-13 04:07:10 +00:00
c . title . text ( c . calendar _dom . calendar . currentData . viewTitle ) ;
// c.calendar_dom.calendar.rerenderEvents(); //Rerender to fix layout
2019-11-09 15:42:19 +00:00
} ;
2017-01-20 09:02:50 +00:00
if ( c . currentView == "agenda" ) { toggleViews ( "agenda" ) ; loadeventsonviewchange = true ; }
2019-11-09 15:42:19 +00:00
} ;
2017-01-20 09:02:50 +00:00
this . renderEvent = function ( eventStick ) {
2019-11-09 15:42:19 +00:00
if ( eventStick . recurring === true )
2021-07-05 10:05:49 +00:00
c . calendar _dom . calendar . refetchEvents ( ) ;
2017-01-20 09:02:50 +00:00
else
2022-07-11 09:02:26 +00:00
c . calendar _dom . calendar . addEvent ( eventStick ) ;
2019-11-09 15:42:19 +00:00
} ;
2017-01-20 09:02:50 +00:00
$ ( document ) . ready ( function ( ) {
c . initialize ( ) ;
} ) ;
2019-11-09 15:42:19 +00:00
} ;
2017-01-20 09:02:50 +00:00
var EventDialog = function ( calendar , event ) {
_t = this ;
var event _quick _view = null ;
var template = "" ;
var _this _event = null ;
this . inflate = function ( _event ) {
if ( ! _event ) throw new UserException ( "EventStick can't be null!" ) ;
2021-07-05 10:05:49 +00:00
_event . allDay = _event . event . allDay ;
_event . _start = _event . event . start ;
_event . _end = ( _event . event . end ? _event . event . end : _event . event . start ) ;
// var start_date = getDateString(_event._start,date_format);
// var end_date = getDateString(_event._end,date_format);
if ( _event . _end - _event . _start > 86400 * 1000 ) {
_event . allDay = true ;
}
_event . title = _event . event . title ;
2022-07-11 09:02:26 +00:00
var extendedProps = _event . event . extendedProps ;
Object . keys ( extendedProps ) . forEach ( function ( k ) {
_event [ k ] = extendedProps [ k ] ;
} )
2021-07-05 10:05:49 +00:00
if ( ! _event . hiring _person _name )
_event . hiring _person _name = "" ;
2017-01-20 09:02:50 +00:00
_this _event = _event ;
var start _time = "" ,
2021-07-05 10:05:49 +00:00
end _time = "" ,
time _string = null ;
2017-01-20 09:02:50 +00:00
if ( _event . allDay ) {
2021-07-05 10:05:49 +00:00
start _time = getDateString ( _event . _start , datetime _format , is _chinese ) ;
2017-01-20 09:02:50 +00:00
if ( _event . _end )
2021-07-05 10:05:49 +00:00
end _time = getDateString ( _event . _end , datetime _format , is _chinese ) ;
time _string = ( _event . _start === _event . _end || ! _event . _end ? "<p class='start-date'><i class='icons-calendar' /></i>" + start _time + "</p>" : "<i class='icons-calendar' /></i>" + start _time + "<br><i class='icons-arrow-right-5' /></i>" + end _time + "" ) ;
2017-01-20 09:02:50 +00:00
} else {
2021-07-05 10:05:49 +00:00
start _time = getDateString ( _event . _start , date _format , is _chinese ) ;
end _time = getDateString ( _event . _end , date _format , is _chinese ) ;
var stime = getDateString ( _event . _start , time _format , is _chinese ) ,
etime = getDateString ( _event . _end , time _format , is _chinese ) ,
same = ( start _time == end _time ) ;
if ( same ) {
time _string = "<p class='date'><i class='icons-calendar' /></i> " +
start _time +
"</p><p class='time'><i class='icons-clock' /></i> " + stime +
" <i class='icons-arrow-right-5' /></i> " + etime ;
} else {
time _string = "<i class='icons-calendar' /></i><span class='start-date'>" + start _time + " " + stime +
"</span><br><i class='icons-arrow-right-5' /></i><span class='end-date'>" +
end _time + " " + etime + "</span>"
}
// time_string = (same ? "<p class='date'><i class='icons-calendar' /> " + start_time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start_time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end_time + "<span class='pull-right'>" + etime + "</p>");
2017-01-20 09:02:50 +00:00
}
event _quick _view = $ ( '<div class="calendar-modal" style="display:none;"></div>' ) ;
template = '<div class="modal-content">' +
2019-11-09 15:42:19 +00:00
'<div class="modal-header">' +
2017-01-20 09:02:50 +00:00
'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h3>' + _event . title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
2019-11-09 15:42:19 +00:00
'<div class="event_summary">' + time _string + '</br>' + _event . hiring _person _name + '</div>' + _event . note +
2022-07-11 07:26:47 +00:00
( _event . error _message ? ( "<br><span style=\"color: #FC4040;\">" + _event . error _message + "</span>" ) : "" )
2017-01-20 09:02:50 +00:00
'</div>' +
'<div class="modal-footer" />' +
'</div>' ;
}
this . show = function ( pos ) {
2021-09-06 16:45:14 +00:00
event _quick _view . css ( { display : 'inline-block' , width : '' , height : '' , position : "fixed" , "z-index" : "10000" } ) ;
var offset ;
var padding = 20 ;
2017-01-20 09:02:50 +00:00
if ( pos ) {
2021-09-06 16:45:14 +00:00
offset = { "left" : pos . x , "top" : pos . y } ;
2017-01-20 09:02:50 +00:00
var pos = getPosition ( pos ) ;
2021-09-06 16:45:14 +00:00
event _quick _view . offset ( offset ) ;
} else {
offset = { "left" : padding , "top" : padding } ;
2017-01-20 09:02:50 +00:00
}
event _quick _view . html ( template ) . appendTo ( "body" ) . show ( ) ;
event _quick _view . find ( ".event-close-btn" ) . one ( "click" , function ( ) { _t . dismiss ( ) ; } ) ;
event _quick _view . find ( "a.delete" ) . one ( "click" , function ( ) { calendar . deleteEvent ( _this _event . delete _url , _this _event . _id ) ; return false ; } ) ;
event _quick _view . find ( "a.edit" ) . one ( "click" , function ( ) { calendar . editEvent ( _this _event . edit _url , _this _event . allDay ) ; return false ; } ) ;
2021-07-05 10:05:49 +00:00
var window _width = $ ( window ) . width ( ) ,
window _height = $ ( window ) . height ( ) ;
var dialog _width = event _quick _view . width ( ) ,
dialog _height = event _quick _view . height ( ) ;
var new _offset = Object . assign ( { } , offset ) ;
var need _redisplay = false ;
var new _width = null , new _height = null ;
2021-09-06 16:45:14 +00:00
var padding _top = padding + 40 ;
2021-07-05 10:05:49 +00:00
if ( offset . left + dialog _width > window _width ) {
new _offset . left = window _width - dialog _width - padding ;
need _redisplay = true ;
}
if ( new _offset . left < padding ) {
new _width = dialog _width - ( padding - new _offset . left ) ;
new _offset . left = padding ;
need _redisplay = true ;
}
if ( offset . top + dialog _height > window _height ) {
new _offset . top = window _height - dialog _height - padding ;
need _redisplay = true ;
}
2021-09-06 16:45:14 +00:00
if ( new _offset . top < padding _top ) {
new _height = dialog _height - ( padding _top - new _offset . top ) ;
new _offset . top = padding _top ;
2021-07-05 10:05:49 +00:00
need _redisplay = true ;
}
if ( need _redisplay ) {
event _quick _view . offset ( new _offset ) ;
event _quick _view . width ( new _width ) ;
event _quick _view . height ( new _height ) ;
}
2017-01-20 09:02:50 +00:00
}
2021-09-07 05:07:09 +00:00
this . hide = function ( ) {
calendar . calendar _dom . find ( '.fc-popover-close' ) . click ( ) ;
$ ( event _quick _view ) . hide ( ) ;
}
2017-01-20 09:02:50 +00:00
this . dismiss = function ( ) {
if ( event _quick _view )
event _quick _view . remove ( ) ;
}
var getPosition = function ( pos ) {
var x = pos . x ,
y = pos . y ,
winheight = $ ( window ) . height ( ) ;
if ( ( x + event _quick _view . width ( ) ) > $ ( window ) . width ( ) ) {
x = x - event _quick _view . width ( ) ;
}
if ( ( y + event _quick _view . height ( ) ) > winheight ) {
y = y - event _quick _view . height ( ) ;
}
return { "x" : x , "y" : y } ;
}
if ( event )
_t . inflate ( event ) ;
}
var UserException = function ( message ) {
this . message = message ;
this . name = "UserException" ;
this . toString = function ( ) {
2022-07-11 07:26:47 +00:00
return this . message ;
2017-01-20 09:02:50 +00:00
}
}
var AgendaView = function ( calendar ) {
var av = this ;
var _calendar = calendar ;
var agenda _space = _calendar . agenda _space ;
var today = new Date ( ) ;
var minDifference = 6 ;
var start _month = today . getMonth ( ) ;
var start _year = today . getFullYear ( ) ;
var end _month = ( ( start _month + minDifference ) > 11 ? ( start _month + minDifference ) - 11 : start _month + minDifference ) ;
var end _year = ( ( start _month + minDifference ) > 11 ? start _year + 1 : start _year ) ;
var monthNames = [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ] ;
var month _template = '<div class="col-md-4">' +
'<h4></h4>' +
'<div class="tiny_calendar">' +
'<table class="table table-condensed table-bordered">' +
'<tbody>' +
'<tr>' +
'<th class="week_title">Sun</th>' +
'<th class="week_title">Mon</th>' +
'<th class="week_title">Tue</th>' +
'<th class="week_title">Wed</th>' +
'<th class="week_title">Thu</th>' +
'<th class="week_title">Fri</th>' +
'<th class="week_title">Sat</th>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>' +
'</div>' ;
var event _list _template = '<div class="col-md-8 agenda-event">' +
'<table class="table table-condensed table-bordered event_list">' +
'<thead>' +
'<tr>' +
'<th>Date</th>' +
'<th>Time</th>' +
'<th>Events</th>' +
2021-07-05 10:05:49 +00:00
'<th>Borrower</th>' +
2017-01-20 09:02:50 +00:00
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td colspan="3" class="no_events">No events for this month.</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>' ;
var head _template = '<div>' +
'<label>From</label>' +
2021-07-05 10:05:49 +00:00
'<input class="input-large" id="agenda_start" placeholder="YYYY/MM" type="text" value="' + start _year + '/' + ( '0' + ( start _month + 1 ) ) . substr ( - 2 , 2 ) + '" title="YYYY/MM" autocomplete="off">' +
2017-01-20 09:02:50 +00:00
'<label>To</label>' +
2021-07-05 10:05:49 +00:00
'<input class="input-large" id="agenda_end" placeholder="YYYY/MM" type="text" value="' + end _year + '/' + ( '0' + ( end _month + 1 ) ) . substr ( - 2 , 2 ) + '" title="YYYY/MM" autocomplete="off">' +
2017-01-20 09:02:50 +00:00
'<button id="show_events" class="btn btn-sm bt-filter btn-primary">Show Events</button>' +
'</div>' ;
var event _template = '<tr>' +
'<td />' +
'<td class="event_time" />' +
'<td>' +
'<div class="event" />' +
'</td>' +
2021-07-05 10:05:49 +00:00
'<td class="Borrower">' +
2017-01-20 09:02:50 +00:00
'</tr>' ;
// var month_template = '<div class="span4"><h4></h4><div class="tiny_calendar"><table class="table"><tbody><tr><th class="week_title">Sun</th><th class="week_title">Mon</th><th class="week_title">Tue</th><th class="week_title">Wed</th><th class="week_title">Thu</th><th class="week_title">Fri</th><th class="week_title">Sat</th></tr></tbody></table></div></div>';
// var event_list_template = '<div class="span8"><table class="table event_list"><thead><tr height="0"><th class="span3"></th><th class="span2"></th><th class=""></th></tr></thead><tbody><tr><td colspan="3" class="no_events">No events for this month.</td></tr></tbody></table></div>';
// var head_template = '<div><label>From</label> <select name="start_month" class="input-small"></select><select name="start_year" class="input-small"></select><label>To</label> <select name="end_month" class="input-small"></select><select name="end_year" class="input-small"></select><button id="show_events" class="btn bt-filter">Show Events</button></div>';
// var event_template = "<tr><th></th><td class='event_time'></td><td><div class='event'></div></td></tr>";
var cache = false ;
var show _event _clicked = false ;
this . refresh = function ( ) {
av . inflate ( true ) ;
}
this . inflate = function ( forceInflation ) {
loading ( true ) ;
2021-07-05 10:05:49 +00:00
_calendar . calendar _dom . hide ( ) ;
2017-01-20 09:02:50 +00:00
_calendar . navigation . hide ( ) ;
if ( ! forceInflation ) {
if ( cache ) {
av . show ( ) ;
loading ( false ) ;
return ;
}
}
agenda _space . empty ( ) ;
if ( ! show _event _clicked ) {
_calendar . rangeSelection . empty ( ) ;
_calendar . rangeSelection . append ( renderHead ( ) . html ( ) ) . show ( ) ;
_calendar . rangeSelection . find ( "button#show_events" ) . click ( function ( ) {
show _event _clicked = true ;
2021-07-05 10:05:49 +00:00
var starts = $ ( "#agenda_start" ) . val ( ) . split ( "/" ) ,
ends = $ ( "#agenda_end" ) . val ( ) . split ( "/" ) ;
start _month = parseInt ( starts [ 1 ] ) - 1 ;
end _month = parseInt ( ends [ 1 ] ) - 1 ;
start _year = parseInt ( starts [ 0 ] ) ;
end _year = parseInt ( ends [ 0 ] ) ;
2017-01-20 09:02:50 +00:00
av . inflate ( true ) ;
} )
}
show _event _clicked = false ;
eventsManager ( ) ;
var s = start _month ,
e = end _month
y = start _year ;
e = ( e > s && start _year == end _year ? e : e + 11 ) ;
if ( end _year > start _year )
e = e + ( ( end _year - start _year - 1 ) * 12 ) ;
else e -- ;
for ( var i = s ; i <= e + 1 ; i ++ ) {
var m = new Month ( s , y ) ;
s ++ ;
if ( s > 11 ) {
s = 0 ;
y ++ ;
}
if ( e == 0 )
agenda _space . text ( "Invalid Range of Dates." )
else
agenda _space . append ( m . monthDom ) ;
}
loading ( false ) ;
}
this . hide = function ( ) {
cache = true ;
_calendar . rangeSelection . hide ( ) ;
agenda _space . hide ( ) ;
_calendar . navigation . show ( ) ;
2021-07-05 10:05:49 +00:00
_calendar . calendar _dom . show ( ) ;
2017-01-20 09:02:50 +00:00
}
this . show = function ( ) {
_calendar . rangeSelection . show ( ) ;
agenda _space . show ( ) ;
}
var copyObject = function ( x ) {
return x . clone ( ) ;
}
var eventsManager = function ( ) {
2021-07-05 10:05:49 +00:00
var url = "/xhr/property_hires/get_bookings?property_id=" + _calendar . property _id ,
2017-01-20 09:02:50 +00:00
sd = new Date ( start _year , start _month , 1 ) ,
ed = new Date ( end _year , end _month + 1 , 0 ) ,
usd = Math . round ( sd / 1000 ) ,
ued = Math . round ( ed / 1000 ) ;
$ . ajax ( {
type : "get" ,
url : url ,
2021-07-05 10:05:49 +00:00
dataType : "json" ,
data : { "agenda_start" : sd . toLocaleString ( ) , "agenda_end" : ed . toLocaleString ( ) , "page_id" : _calendar . page _id , "start" : usd , "end" : ued } ,
2017-01-20 09:02:50 +00:00
success : function ( data ) {
2021-07-05 10:05:49 +00:00
$ ( "#agenda_start,#agenda_end" ) . datepicker ( {
dateFormat : "yy/mm" ,
onChangeMonthYear : function ( year , month , inst ) {
$ ( this ) . val ( $ . datepicker . formatDate ( 'yy/mm' , new Date ( year , month - 1 , 1 ) ) ) ;
} ,
gotoCurrent : true
} ) ;
$ ( "#agenda_start,#agenda_end" ) . on ( "focus" , function ( ) {
var input = this ;
var inst = $ ( this ) . data ( "datepicker" ) ;
var year _month = $ ( input ) . val ( ) . split ( "/" ) ;
if ( year _month . length == 2 ) {
inst . selectedYear = parseInt ( year _month [ 0 ] ) ;
inst . selectedMonth = parseInt ( year _month [ 1 ] ) - 1 ;
inst . drawYear = inst . selectedYear ;
inst . drawMonth = inst . selectedMonth ;
inst . currentYear = inst . selectedYear ;
inst . currentMonth = inst . selectedMonth ;
}
$ . datepicker . _updateDatepicker ( inst ) ;
} )
$ ( "#agenda_start,#agenda_end" ) . focus ( function ( ) {
2022-07-11 07:26:47 +00:00
$ ( ".ui-datepicker-calendar" ) . hide ( ) ;
$ ( "#ui-datepicker-div" ) . position ( {
my : "center top" ,
at : "center bottom" ,
of : $ ( this )
} ) ;
} ) ;
2021-07-05 10:05:49 +00:00
$ . each ( data , function ( i , e ) {
2017-01-20 09:02:50 +00:00
var ed = eventDom ( e ) ,
s = new Date ( e . start ) ,
e = new Date ( e . end ) ,
e _m = ( ( e . getMonth ( ) > s . getMonth ( ) || s . getMonth ( ) == e . getMonth ( ) ) && s . getFullYear ( ) == e . getFullYear ( ) ? e . getMonth ( ) : e . getMonth ( ) + 12 )
s _m = s . getMonth ( ) ,
s _y = s . getFullYear ( ) ;
if ( e . getFullYear ( ) > s . getFullYear ( ) )
e _m = e _m + ( ( e . getFullYear ( ) - s . getFullYear ( ) - 1 ) * 12 ) ;
for ( var i = s _m ; i < e _m + 1 ; i ++ ) {
var temp _ed = copyObject ( ed ) ;
var list = agenda _space . find ( "div[data-month=" + s _m + "][data-year=" + s _y + "] table.event_list tbody" ) ;
list . append ( temp _ed ) ;
s _m ++ ;
if ( s _m > 11 ) {
s _m = 0 ;
s _y ++ ;
}
}
if ( s . getDate ( ) == e . getDate ( ) && s . getMonth ( ) == s . getMonth ( ) && e . getFullYear ( ) == e . getFullYear ( ) ) {
var td = agenda _space . find ( "td[data-date-node=" + s . getDate ( ) + "-" + s . getMonth ( ) + "-" + s . getFullYear ( ) + "]" ) ;
td . addClass ( "has_event" ) ;
} else {
var timeDiff = Math . abs ( e . getTime ( ) - s . getTime ( ) ) ,
diffDays = Math . ceil ( timeDiff / ( 1000 * 3600 * 24 ) ) ,
c _m = s . getMonth ( ) ,
c _d = s . getDate ( ) ,
c _y = s . getFullYear ( ) ,
end _of _c _month = new Date ( s . getFullYear ( ) , s . getMonth ( ) + 1 , 0 ) . getDate ( ) ;
for ( var i = 0 ; i <= diffDays ; i ++ ) {
var td = agenda _space . find ( "td[data-date-node=" + c _d + "-" + c _m + "-" + c _y + "]" ) ;
td . addClass ( "has_event" ) ;
c _d ++ ;
if ( c _d > end _of _c _month ) {
c _d = 1 ;
c _m ++ ;
if ( c _m > 11 ) {
c _m = 0 ;
c _y ++ ;
}
}
}
}
} )
agenda _space . find ( "table.event_list tbody" ) . each ( function ( ) {
if ( $ ( this ) . find ( "tr" ) . length > 1 )
$ ( this ) . find ( "td.no_events" ) . parent ( ) . remove ( ) ;
} )
// nano scroller here
}
} )
var eventDom = function ( event ) {
var e _t = $ ( event _template ) ,
s = new Date ( event . start ) ,
e = new Date ( event . end ) ,
2021-07-05 10:05:49 +00:00
dateFormat = "" ,
hiring _person _name = event . hiring _person _name ;
2017-01-20 09:02:50 +00:00
if ( s . getDate ( ) == e . getDate ( ) && s . getMonth ( ) == s . getMonth ( ) && e . getFullYear ( ) == e . getFullYear ( ) )
2021-07-05 10:05:49 +00:00
dateFormat = getDateString ( s , short _day , is _chinese ) ;
2017-01-20 09:02:50 +00:00
else
2021-07-05 10:05:49 +00:00
dateFormat = getDateString ( s , short _date , is _chinese ) + ' - ' + getDateString ( e , short _date , is _chinese ) ;
2017-01-20 09:02:50 +00:00
e _t . find ( "td:first" ) . text ( dateFormat ) ;
2022-04-09 12:21:02 +00:00
e _t . find ( "td.event_time" ) . text ( ( event . diff _day ? ( getDateString ( s , short _date _time , is _chinese ) + "~" + getDateString ( e , short _date _time , is _chinese ) ) : ( getDateString ( s , time _format ) + "~" + getDateString ( e , time _format ) ) ) ) ;
2021-10-22 14:09:10 +00:00
e _t . find ( "div.event" ) . html ( event . title ) . css ( "color" , event . color ) ;
2021-07-05 10:05:49 +00:00
e _t . find ( "td.Borrower" ) . text ( hiring _person _name ) ;
2017-01-20 09:02:50 +00:00
return e _t ;
}
}
var loading = function ( bool ) {
if ( bool ) _calendar . loading . css ( "left" , ( $ ( window ) . width ( ) / 2 - 60 ) + "px" ) . show ( ) ;
else _calendar . loading . hide ( ) ;
}
var renderHead = function ( ) {
var head = $ ( head _template ) ;
var start _month _select = head . find ( "select[name=start_month]" ) ;
for ( var i = 0 ; i < 12 ; i ++ ) {
var option = $ ( "<option value='" + i + "'>" + monthNames [ i ] + "</option>" ) ;
if ( i == start _month )
option . attr ( "selected" , "selected" ) ;
start _month _select . append ( option ) ;
}
var end _month _select = head . find ( "select[name=end_month]" ) ;
for ( var i = 0 ; i < 12 ; i ++ ) {
var option = $ ( "<option value='" + i + "'>" + monthNames [ i ] + "</option>" ) ;
if ( i == end _month )
option . attr ( "selected" , "selected" ) ;
end _month _select . append ( option ) ;
}
var start _year _select = head . find ( "select[name=start_year]" ) ;
var y = start _year - 5 ;
for ( var i = 0 ; i < 10 ; i ++ ) {
var option = $ ( "<option value='" + y + "'>" + y + "</option>" ) ;
if ( y == start _year )
option . attr ( "selected" , "selected" ) ;
start _year _select . append ( option ) ;
y ++ ;
}
var end _year _select = head . find ( "select[name=end_year]" ) ;
y = start _year - 5 ;
for ( var i = 0 ; i < 10 ; i ++ ) {
var option = $ ( "<option value='" + y + "'>" + y + "</option>" ) ;
if ( y == end _year )
option . attr ( "selected" , "selected" ) ;
end _year _select . append ( option ) ;
y ++ ;
}
return head ;
}
var Month = function ( month , year ) {
_this = this ;
this . monthDom = $ ( "<div class='row' data-year='" + year + "' data-month='" + month + "'></div>" ) ;
var template = $ ( month _template ) ;
var list _template = $ ( event _list _template ) ;
var firstDay = new Date ( year , month , 1 ) ;
var lastDay = new Date ( year , month + 1 , 0 ) ;
var last _inserted _date = 1 ;
var renderMonth = function ( ) {
var num _of _rows = getNumberOfRows ( year , month )
for ( var i = 0 ; i < num _of _rows ; i ++ ) {
var tr = null ;
if ( i == 0 )
tr = makeRow ( "first" ) ;
else if ( i == ( num _of _rows - 1 ) ) {
tr = makeRow ( "last" ) ;
} else {
tr = makeRow ( "middle" ) ;
}
if ( tr == null ) {
break ;
}
template . find ( "table.table tbody" ) . append ( tr ) ;
template . find ( "h4" ) . text ( monthNames [ firstDay . getMonth ( ) ] + " - " + firstDay . getFullYear ( ) ) ;
}
_this . monthDom . append ( template ) ;
_this . monthDom . append ( list _template ) ;
}
function getNumberOfRows ( year , month ) {
2022-07-11 07:26:47 +00:00
var day = 1 ,
sat _counter = 0 ,
sunday _counter = 0 ,
date = new Date ( year , month , day ) ;
while ( date . getMonth ( ) === month ) {
if ( date . getDay ( ) === 0 ) {
sunday _counter ++ ;
} else if ( date . getDay ( ) === 6 ) {
sat _counter ++ ;
}
day ++ ;
date = new Date ( year , month , day ) ;
}
return ( sunday _counter == 5 && sat _counter == 5 ? 6 : 5 ) ;
2017-01-20 09:02:50 +00:00
}
var makeRow = function ( position ) {
if ( last _inserted _date <= lastDay . getDate ( ) ) {
var row = $ ( "<tr></tr>" ) ;
switch ( position ) {
case "first" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
if ( i >= firstDay . getDay ( ) ) {
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
}
row . append ( td ) ;
}
break ;
case "middle" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
row . append ( td ) ;
}
break ;
case "last" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
if ( i <= lastDay . getDay ( ) ) {
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
}
row . append ( td ) ;
}
break ;
}
} else {
var row = null ;
}
return row ;
}
renderMonth ( ) ;
}
2019-11-09 15:42:19 +00:00
}