arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-02-09 08:19:41 +00:00
Code Issues Projects Releases Wiki Activity

First pass at porting calendar from FC V3 to V5

Browse Source 
Two major versions and all they did was rename a bunch of names...TWICE.
This commit is contained in:
FreneticScribbler
2020-10-19 00:13:06 +01:00
parent 320ace1a0e
commit e6eed9f2f2
11 changed files with 1428 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
RIGS/static/css/dark_screen.css
View File

File diff suppressed because one or more lines are too long

269
RIGS/static/css/main.css Normal file
View File

File diff suppressed because one or more lines are too long

1047
RIGS/static/css/main.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
RIGS/static/css/screen.css
View File

File diff suppressed because one or more lines are too long

6
RIGS/static/js/main.js Normal file
View File

File diff suppressed because one or more lines are too long

6
RIGS/static/js/main.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
RIGS/static/scss/dark_screen.scss
View File

@@ -63,8 +63,12 @@
background-color: $gray-200 !important; background-color: $gray-200 !important;
border-radius: 0.2em; border-radius: 0.2em;
} }
.fc-today { .fc-day-today {
padding: 0 !important; background-color: transparent !important;
border: 0.2em solid $info !important;
}
.fc-daygrid-dot-event {
color: white !important;
} }
.table { .table {
border-collapse: separate !important; border-collapse: separate !important;

16
RIGS/static/scss/screen.scss
View File

@@ -12,18 +12,22 @@
} }
} }
.fc-content { .fc-event-main {
color: black; color: black !important;
} }
.fc-agendaDay-view { .fc-daygrid-dot-event {
.fc-content { color: black !important;
}
.fc-timeGridDay-view {
.fc-event-main {
font-size: large !important; font-size: large !important;
} }
} }
.fc-agendaWeek-view { .fc-timeGridWeek-view {
.fc-content { .fc-event-main {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }

124
RIGS/templates/calendar.html
View File

@@ -4,13 +4,12 @@
{% block title %}Calendar{% endblock %} {% block title %}Calendar{% endblock %}
{% block css %} {% block css %}
<link href="{% static "css/fullcalendar.css" %}" rel='stylesheet' /> <link href="{% static 'css/main.min.css' %}" rel='stylesheet' />
<link href="{% static "css/fullcalendar.print.css" %}" rel='stylesheet' media='print' />
{% endblock %} {% endblock %}
{% block js %} {% block js %}
<script src="{% static 'js/moment.js' %}"></script> <script src="{% static 'js/moment.js' %}"></script>
<script src="{% static 'js/fullcalendar.js' %}"></script> <script src="{% static 'js/main.min.js' %}"></script>
<script> <script>
function getUrlVars() { function getUrlVars() {
var vars = {}; var vars = {};
@@ -20,58 +19,49 @@
return vars; return vars;
} }
$(document).ready(function() {
viewToUrl = { viewToUrl = {
'agendaWeek':'week', 'timeGridWeek':'week',
'agendaDay':'day', 'timeGridDay':'day',
'month':'month' 'dayGridMonth':'month'
} }
viewFromUrl = { viewFromUrl = {
'week':'agendaWeek', 'week':'timeGridWeek',
'day':'agendaDay', 'day':'timeGridDay',
'month':'month' 'month':'dayGridMonth'
} }
var calendar; //Need to access it from jquery ready
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
$('#calendar').fullCalendar({ calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap4', themeSystem: 'bootstrap',
editable: false, //defaultView: 'dayGridMonth', This is now default
eventLimit: true, // allow "more" link when too many events
firstDay: 1,
aspectRatio: 1.5, aspectRatio: 1.5,
timeFormat: 'HH:mm', eventTimeFormat: {
views: { 'hour': '2-digit',
basic: { 'minute': '2-digit',
// options apply to basicWeek and basicDay views 'hour12': false
}, },
agenda: { //nowIndicator: true,
// options apply to agendaWeek and agendaDay views //firstDay: 1,
}, headerToolbar: false,
week: { editable: false,
columnFormat:'ddd D/M' dayMaxEventRows: true, // allow "more" link when too many events
}, events: function(fetchInfo, successCallback, failureCallback) {
day: {
// options apply to basicDay and agendaDay views
}
},
header:false,
events: function(start_moment, end_moment, timezone, callback) {
$.ajax({ $.ajax({
url: '/api/event', url: '/api/event',
dataType: 'json', dataType: 'json',
data: { data: {
start: moment(start_moment).format("YYYY-MM-DD[T]HH:mm:ss"), start: moment(fetchInfo.startStr).format("YYYY-MM-DD[T]HH:mm:ss"),
end: moment(end_moment).format("YYYY-MM-DD[T]HH:mm:ss") end: moment(fetchInfo.endStr).format("YYYY-MM-DD[T]HH:mm:ss")
}, },
success: function(doc) { success: function(doc) {
var events = []; var events = [];
colours = {'Provisional': '#f0ad4e', colours = {'Provisional': '#FFE89B',
'Confirmed': '#5cb85c' , 'Confirmed': '#3AB54A' ,
'Booked': '#5cb85c' , 'Booked': '#3AB54A' ,
'Cancelled': 'grey' , 'Cancelled': 'grey' ,
'non-rig': '#5bc0de' 'non-rig': '#25AAE2'
}; };
$(doc).each(function() { $(doc).each(function() {
end = $(this).attr('latest') end = $(this).attr('latest')
@@ -92,20 +82,19 @@
}else{ }else{
thisEvent['color'] = colours['non-rig']; thisEvent['color'] = colours['non-rig'];
} }
events.push(thisEvent); events.push(thisEvent);
}); });
callback(events); successCallback(events);
} }
}); });
}, },
datesSet: function(info) {
viewRender: function(view, element){ var view = info.view;
// Set the title of the view // Set the title of the view
$('#calendar-header').text(view.title); $('#calendar-header').text(view.title);
// Enable/Disable "Today" button as required // Enable/Disable "Today" button as required
if(moment().isBetween(view.intervalStart, view.intervalEnd)){ if(moment().isBetween(view.currentStart, view.currentEnd)){
//Today is within the current view //Today is within the current view
$('#today-button').prop('disabled', true); $('#today-button').prop('disabled', true);
}else{ }else{
@@ -113,74 +102,63 @@
} }
// Set active view select button // Set active view select button
switch(view.name){ switch(view.type){
case 'month': case 'dayGridMonth':
$('#month-button').addClass('active'); $('#month-button').addClass('active');
$('#week-button').removeClass('active'); $('#week-button').removeClass('active');
$('#day-button').removeClass('active'); $('#day-button').removeClass('active');
break; break;
case 'agendaWeek': case 'timeGridWeek':
$('#month-button').removeClass('active'); $('#month-button').removeClass('active');
$('#week-button').addClass('active'); $('#week-button').addClass('active');
$('#day-button').removeClass('active'); $('#day-button').removeClass('active');
break; break;
case 'agendaDay': case 'timeGridDay':
$('#month-button').removeClass('active'); $('#month-button').removeClass('active');
$('#week-button').removeClass('active'); $('#week-button').removeClass('active');
$('#day-button').addClass('active'); $('#day-button').addClass('active');
break; break;
} }
history.replaceState(null,null,'{% url 'web_calendar' %}'+viewToUrl[view.name]+'/'+view.intervalStart.format('YYYY-MM-DD')+'/'); history.replaceState(null,null,"{% url 'web_calendar' %}"+viewToUrl[view.type]+'/'+moment(view.currentStart).format('YYYY-MM-DD')+'/');
} }
}); });
calendar.render();
});
$(document).ready(function() {
// set some button listeners // set some button listeners
$('#next-button').click(function(){ calendar.next(); });
$('#next-button').click(function(){ $('#calendar').fullCalendar('next') }); $('#prev-button').click(function(){ calendar.prev(); });
$('#prev-button').click(function(){ $('#calendar').fullCalendar('prev') }); $('#today-button').click(function(){ calendar.today(); });
$('#today-button').click(function(){ $('#calendar').fullCalendar('today') }); $('#month-button').click(function(){ calendar.changeView('dayGridMonth'); });
$('#week-button').click(function(){ calendar.changeView('timeGridWeek'); });
$('#month-button').click(function(){ $('#calendar').fullCalendar('changeView','month') }); $('#day-button').click(function(){ calendar.changeView('timeGridDay'); });
$('#week-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaWeek') });
$('#day-button').click(function(){ $('#calendar').fullCalendar('changeView','agendaDay') });
$('#go-to-date-input').change(function(){ $('#go-to-date-input').change(function(){
if(moment($('#go-to-date-input').val()).isValid()){ if(moment($('#go-to-date-input').val()).isValid()){
$('#go-to-date-button').prop('disabled', false); $('#go-to-date-button').prop('disabled', false);
} else{ } else{
$('#go-to-date-button').prop('disabled', true); $('#go-to-date-button').prop('disabled', true);
} }
}); });
$('#go-to-date-button').click(function(){ $('#go-to-date-button').click(function(){
day = moment($('#go-to-date-input').val()); day = moment($('#go-to-date-input').val());
if(day.isValid()){ if(day.isValid()){
$('#calendar').fullCalendar( 'gotoDate', day); calendar.gotoDate(day.format("YYYY-MM-DD"));
} else{ } else{
alert('Invalid Date'); alert('Invalid Date');
} }
}); });
// Go to the initial settings, if they're valid // Go to the initial settings, if they're valid
view = viewFromUrl['{{view}}']; view = viewFromUrl['{{view}}'];
$('#calendar').fullCalendar( 'changeView', view); calendar.changeView(view);
day = moment('{{date}}'); day = moment('{{date}}');
if(day.isValid()){ if(day.isValid()){
$('#calendar').fullCalendar( 'gotoDate', day); calendar.gotoDate(day.format("YYYY-MM-DD"));
} else{ } else{
console.log('Supplied date is invalid - using default') console.log('Supplied date is invalid - using default')
} }
}); });
</script> </script>
{% endblock %} {% endblock %}

5
gulpfile.js
View File

@@ -19,8 +19,7 @@ sass.compiler = require('node-sass');
function styles(done) { function styles(done) {
return gulp.src(['RIGS/static/scss/**/*.scss', return gulp.src(['RIGS/static/scss/**/*.scss',
'node_modules/fullcalendar/dist/fullcalendar.css', 'node_modules/fullcalendar/main.min.css',
'node_modules/fullcalendar/dist/fullcalendar.print.css',
'node_modules/bootstrap-select/dist/css/bootstrap-select.css', 'node_modules/bootstrap-select/dist/css/bootstrap-select.css',
'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css', 'node_modules/ajax-bootstrap-select/dist/css/ajax-bootstrap-select.css',
'node_modules/flatpickr/dist/flatpickr.css']) 'node_modules/flatpickr/dist/flatpickr.css'])
@@ -52,7 +51,7 @@ function scripts() {
'node_modules/flatpickr/dist/flatpickr.min.js', 'node_modules/flatpickr/dist/flatpickr.min.js',
'node_modules/@fortawesome/fontawesome-free/js/all.js', 'node_modules/@fortawesome/fontawesome-free/js/all.js',
'node_modules/moment/moment.js', 'node_modules/moment/moment.js',
'node_modules/fullcalendar/dist/fullcalendar.js', 'node_modules/fullcalendar/main.min.js',
'node_modules/bootstrap-select/dist/js/bootstrap-select.js', 'node_modules/bootstrap-select/dist/js/bootstrap-select.js',
'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js', 'node_modules/ajax-bootstrap-select/dist/js/ajax-bootstrap-select.js',
'node_modules/konami/konami.js', 'node_modules/konami/konami.js',

2
package.json
View File

@@ -14,7 +14,7 @@
"bootstrap-select": "^1.13.17", "bootstrap-select": "^1.13.17",
"dark-mode-switch": "^1.0.0", "dark-mode-switch": "^1.0.0",
"flatpickr": "^4.6.6", "flatpickr": "^4.6.6",
"fullcalendar": "^3.10.2", "fullcalendar": "^5.3.2",
"gulp-if": "^3.0.0", "gulp-if": "^3.0.0",
"gulp-rename": "^2.0.0", "gulp-rename": "^2.0.0",
"jquery": "^3.5.1", "jquery": "^3.5.1",