Hi all,
I’m new to ScriptCase, coming from other tool (Codecharge). I’d like to have some customization on calendar app, and the original open source js has a lot of documented calls (ie. weekend on/of, it is a simple
$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});
etc). How (where in the app) to put and in which format these calls - is it anyway possible ?
BR
zsimre
I do know that you can add JS during onLoad in some app types - not sure about Calendar. I have done something along the lines of:
echo "<script>alert('Howdy');</script>";
during the onLoad event, and will get a Howdy popup when the page loads. You can probably use the console to find what the fullCalendar is being called as and insert your JS accordingly.
I am very interested in this, so please post back up if you find a solution. Thanks!
OK, I give it up…
Hi Travelr,
it seems that the calendar implementation of sc8 is “closed”, no way make any kind of changes is the final app with the sc8 formal way (with keeping the whole thing an proceess inside sc8 framework).
I tried several ways, checked the generated code, but there is no way to communicate with the fullcalendar script without hacking the generated code (nor the fullCalendar runtime option setting works…), so the only way to use calendar-type app is the sc8’s very limited “built in” methods; unfortunatelly it is limited to ~10% of the original fullCalendar’s capabilities. So if the built-in implementation is enough to you, then use it; if any small modification is needed (ie. smaller size of calendar…) use the original fullCalendar with php/mysql for all calendar-like screens and if events are used any other part of your application then use the same database.
Br
zs
ps.: I’m a bit surpised that SC8 team does not realize the needs of this community, and this closed nature of sc8 (together with not sensitive support) forces me to use CodeCharge again for some tasks…which product has (almost) 0 support but as application development framework it is open and ie. it is easy to customize fullCalendar.
The calendar is an open-source product and SC has made a wrapper with limited capabilities. SC is simply a tool with strong and weak points. We use the strong points and for other tasks we use phpEd or other. SC is not the generic swiss knife who does it all. After all if the hammer is your only tool then every screw becomes a nail as we say it here.
I know that this is an old post, but you can customize the Calendar by copying the Calendar initialisation code (by using inspect in your browser) and insert it in onCalendarScriptInit
In my case this is what I use as a base, then you can add or modify whatever configuration you want, like weekends: false
?>
<script>
window.addEventListener(‘load’, function () {
$('#calendar').fullCalendar({
monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
monthNamesShort: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
dayNames: ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
dayNamesShort: ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],
allDayText: "Full day",
allDayHtml: "Full day",
noEventsMessage: "No events to display",
buttonText: {
today: "Today",
month: "Month",
week: "Week",
day: "Day",
agenda: "Schedule",
print: "Print",
listMonth: "Schedule",
},
views: {
month: {titleFormat: 'MMMM YYYY', columnFormat: 'ddd', timeFormat: 'H:mm',slotLabelFormat: ['ddd','H:mm'],},
week: {titleFormat: 'MMM D YYYY', columnFormat: 'ddd M/D', timeFormat: 'H:mm',slotLabelFormat: ['ddd M/D','H:mm'],},
day: {titleFormat: 'dddd[,] MMM D[,] YYYY', columnFormat: 'dddd M/D', timeFormat: 'H:mm',slotLabelFormat: ['dddd M/D','H:mm'],},
},
firstDay: 0,
header: {
left: 'prev,next today print',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
customButtons: {
goBack: {
text: "Back",
click: function() {
calendarGoBack();
}
},
print: {
text: "Print",
click: function() {
calendar_print();
}
}
},
weekends: false,
editable: true,
slotDuration: "00:30:00",
snapDuration: "00:05:00",
nextDayThreshold: "00:00:00",
eventStartEditable: true,
allDaySlot: true,
noEventsMessage: "No events to display",
events: 'calendar_calendar.php?script_case_init=1&nmgp_opcao=calendar_fetch' + getCategory(false),
eventRender: function (event, element, view) {
if(event.hasOwnProperty('description') && event.description != '')
{
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 80%;">'+event.description+'</span></div>');
}
},
dayClick: function(date, jsEvent, view) {
var sDate = date.format(), sTime = '00:00:00', allDay = false;
if (sDate.indexOf('T') > 0)
{
dateParts = date.format().split('T');
sDate = dateParts[0], sTime = dateParts[1];
}
else if ('month' == view.type)
{
sTime = '06:00:00';
}
else
{
allDay = true;
}
tb_show('', 'calendar_calendar.php?nmgp_opcao=edit_novo&sc_cal_click_date=' + sDate + '&sc_cal_click_time=' + sTime + '&sc_cal_click_allday=' + allDay + '&script_case_init=1&nmgp_outra_jan=true&nmgp_url_saida=modal&TB_iframe=true&modal=true&height=500&width=700', '');
},
eventClick: function(calEvent, jsEvent, view) {
tb_show('', 'calendar_calendar.php?nmgp_opcao=igual_calendar&id=' + calEvent.id + '&__orig_id=' + calEvent.id + '&script_case_init=1&nmgp_outra_jan=true&nmgp_url_saida=modal&TB_iframe=true&modal=true&height=500&width=700', '');
},
eventDrop: function(event, delta, revertFunc) {
$.ajax({
url: 'calendar_calendar.php',
type: 'POST',
dataType: 'json',
data: { 'script_case_init': '1', 'nmgp_opcao': 'calendar_drop', 'sc_event_id': event.id, 'sc_day_delta': delta._data.days, 'sc_time_delta': (delta._data.hours * 60) + delta._data.minutes, 'sc_all_day': event.allDay, 'sc_fullcal_start': (event._start && event._start._d ? event._start._d.toISOString() : ''), 'sc_fullcal_end': (event._end && event._end._d ? event._end._d.toISOString() : '') },
originalEvent: event,
success: function(data) {
var bChanged = false;
if (false == data['status']) {
revertFunc();
}
else {
if ('' != data['backgroundColor']) {
if (this.originalEvent.backgroundColor != data['backgroundColor']) {
bChanged = true;
}
this.originalEvent.backgroundColor = data['backgroundColor'];
}
if ('' != data['borderColor']) {
if (this.originalEvent.borderColor != data['borderColor']) {
bChanged = true;
}
this.originalEvent.borderColor = data['borderColor'];
}
if (this.originalEvent.allDay || this.originalEvent.originalAllDay || bChanged) {
$('#calendar').fullCalendar('refetchEvents');
}
else {
$('#calendar').fullCalendar('updateEvent', this.originalEvent);
}
}
if ('' != data['message']) {
alert(data['message']);
}
}
});
},
eventResize: function(event, delta, revertFunc) {
$.post(
'calendar_calendar.php',
{ 'script_case_init': '1', 'nmgp_opcao': 'calendar_resize', 'sc_event_id': event.id, 'sc_day_delta': delta._data.days, 'sc_time_delta': (delta._data.hours * 60) + delta._data.minutes, 'sc_fullcal_start': (event._start && event._start._d ? event._start._d.toISOString() : ''), 'sc_fullcal_end': (event._end && event._end._d ? event._end._d.toISOString() : '') },
function(data) {
if (false == data['status']) {
revertFunc();
}
if ('' != data['message']) {
alert(data['message']);
}
},
'json'
);
},
defaultView: 'agendaWeek',
});
});
</script>
<?php
Don’t use this code directly, you need to copy it from your system to work correctly since it include your app name and internal ID
Do you know anything about calling the event date or some other indentifier from an event which is part of a recurring event? For example, the start date is Dec 1 and the end date is Jan 1 and the event runs every Monday at 8 AM. This is stored in the DB with one ID. How can I get some kind of unique identifier for each event date within that range?
Thanks!
You will have to break down the recurring event to individual event, it’s not perfect but it work.
You need to do it in the onBeforeInsert event in SC
Thank you for the quick reply! Right - I figured that much out. But I’m looking for the function to change a recurring event into a repeating event - the FullCalendar documentation describes this as “expanding” and should change the one ID into one ID for each date in the date range. More about it here:
I’m looking for this to be available for my clients who use the calendar, so they don’t have to create single events for each one in the date range. I thought you might know how to initialize that feature or could steer me in that direction.
No I am not using this feature,
I am letting them create a recurrent event and I save it as individual event myself in the onBeforeInsert event
You are changing the recurring (one ID) into many IDs, one for each date in the range?
Yes, that’s what I do by creating all the entry needed
Oh my gosh, can you send me an example of your code? I’ll buy you a beer. 
It’s an old project, I have to check if I still have access to it
It basically just a loop, and I am adding the number of day, week or month to the base date, save it in start_date and en_date, then insert it in the DB with all the other field of the event
You do need to do it to a maximum date if it’s not set (I think i put it to 2 years)
Thank you very much. Yes, if it’s convenient to check if you still have access, great. But this gives me enough to start with.