arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-01-17 13:32:15 +00:00
Code Issues Projects Releases Wiki Activity

Rewrote web calendar UI to have bootstrap interface. Also has go-to-date function - issue #109

Browse Source
This commit is contained in:
David Taylor
2015-06-29 17:38:47 +01:00
parent 30f235be22
commit f78f20e4ab
1 changed files with 111 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
RIGS/templates/RIGS/calendar.html
View File

@@ -37,17 +37,8 @@
// options apply to basicDay and agendaDay views
}
},
buttonText:{
today: 'Today',
month: 'Month',
week: 'Week',
day: 'Day'
},
header:{
left: 'title',
center: '',
right: 'today prev,next month,agendaWeek,agendaDay'
},
header:false,
events: function(start_moment, end_moment, timezone, callback) {
$.ajax({
@@ -62,10 +53,11 @@
var colours =
$(doc).each(function() {
thisEvent = [];
colours = {'Provisional': 'orange',
'Confirmed': 'green' ,
'Booked': 'green' ,
'Cancelled': 'grey'
colours = {'Provisional': '#f0ad4e',
'Confirmed': '#5cb85c' ,
'Booked': '#5cb85c' ,
'Cancelled': 'grey' ,
'non-rig': '#5bc0de'
};
thisEvent['start'] = $(this).attr('start_date');
@@ -84,7 +76,11 @@
thisEvent['title'] = $(this).attr('title');
thisEvent['color'] = colours[$(this).attr('status')];
if($(this).attr('is_rig')==true || $(this).attr('status') == "Cancelled"){
thisEvent['color'] = colours[$(this).attr('status')];
}else{
thisEvent['color'] = colours['non-rig'];
}
thisEvent['url'] = $(this).attr('url');
@@ -93,19 +89,115 @@
callback(events);
}
});
},
viewRender: function(view, element){
// Set the title of the view
$('#calendar-header').text(view.title);
// Enable/Disable "Today" button as required
if(moment().isBetween(view.intervalStart, view.intervalEnd)){
//Today is within the current view
$('#today-button').prop('disabled', true);
}else{
$('#today-button').prop('disabled', false);
}
// Set active view select button
switch(view.name){
case 'month':
$('#month-button').addClass('active');
$('#week-button').removeClass('active');
$('#day-button').removeClass('active');
break;
case 'agendaWeek':
$('#month-button').removeClass('active');
$('#week-button').addClass('active');
$('#day-button').removeClass('active');
break;
case 'agendaDay':
$('#month-button').removeClass('active');
$('#week-button').removeClass('active');
$('#day-button').addClass('active');
break;
}
}
});
// set some button listeners
$('#next-button').click(function(){ $('#calendar').fullCalendar('next') });
$('#prev-button').click(function(){ $('#calendar').fullCalendar('prev') });
$('#today-button').click(function(){ $('#calendar').fullCalendar('today') });
$('#month-button').click(function(){ $('#calendar').fullCalendar('changeView','month') });
$('#week-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaWeek') });
$('#day-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaDay') });
$('#go-to-date-input').change(function(){
if( moment($('#go-to-date-input').val()).isValid() ){
$('#go-to-date-button').prop('disabled', false);
}else{
$('#go-to-date-button').prop('disabled', true);
}
});
$('#go-to-date-button').click(function(){
day = moment($('#go-to-date-input').val()) ;
if(day.isValid()){
$('#calendar').fullCalendar( 'gotoDate', day);
}else{
alert('Invalid Date');
}
});
});
</script>
{% endblock %}
{% block content %}
<div class="row">
<div style="col-sm-12">
<div id='calendar'>
<div class="col-sm-12">
<div class="pull-left">
<span id="calendar-header" class="h2"></span>
</div>
<div class="form-inline pull-right btn-page">
<div class="input-group">
<input type="date" class="form-control" id="go-to-date-input" placeholder="Go to date...">
<span class="input-group-btn">
<button class="btn btn-default" id="go-to-date-button" type="button" disabled>Go!</button>
</span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary" id="today-button">Today</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" id="prev-button"><span class="glyphicon glyphicon-chevron-left"></span></button>
<button type="button" class="btn btn-default" id="next-button"><span class="glyphicon glyphicon-chevron-right"></span></button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default" id="month-button">Month</button>
<button type="button" class="btn btn-default" id="week-button">Week</button>
<button type="button" class="btn btn-default" id="day-button">Day</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div id='calendar'>
</div>
</div>
{% endblock %}