I'm trying to use moment().format() with fullcalendar; I have this code:
<script src="<?php echo ASSETS_URL; ?>/js/plugin/fullcalendar/lib/moment.js"></script>
<script> moment().format() </script>
<script type="text/javascript">
$('#calendar').fullCalendar({
header: hdr,
buttonText: {
prev: '<i class="fa fa-chevron-left"></i>',
next: '<i class="fa fa-chevron-right"></i>'
},
defaultView: "agendaWeek",
editable: true,
droppable: false, // this allows things to be dropped onto the calendar !!!
lang: 'it',
timeFormat: 'H(:mm)',
firstDay: 1,
drop: function (date, allDay) { // this function is called when something is dropped
events: [{
}],
eventDragStart: function( event, jsEvent, ui, view ) {
ev_start=event.start.moment().format("dddd (d) DDD - D/MM/YY");
console.log(ev_start);
},
},
When I drag an element from calendar there is this error:
Uncaught TypeError: undefined is not a function
I done some debug and the error is caused by moment().format()
Anyone could help me?
If you receive that error on that line, check your moment.js file is good.
Then, this line is wrong:
ev_start=event.start.moment().format("dddd (d) DDD - D/MM/YY");
If event.start it's a timedate you should do this:
ev_start = moment(event.start).format("dddd (d) DDD - D/MM/YY");
Related
My goal is to have 2 different FullCalendar elements that stay in sync. I'm not doing ANY network calls, simply client side arrays at this point.
When I add an event (say through a click or just right after it's built) the calendar does not actually re-render as the documentation claims.
I've also attempted to use the "renderEvents" and "renderEvent" flavors but that seems unnecessary since "updateEvents" would/should update the rendering of these events. The problem I also ran into is the "renderEvent" on the list version of the calendar does not show the event I'm adding if it's out of the range of that calendar.
const events = [{
title: 'All Day Event',
start: TODAY
},
{
title: 'Long Event',
start: TODAY,
end: NEXTDAY
}
]
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
events
})
$("#events").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
defaultView: 'listMonth',
events
})
// Now add a new one
events.push([{
title: 'Event added',
start: YESTERDAY
}])
$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)
Here's a recreation of the issue:
https://jsfiddle.net/Kikketer/7d92utp5/
The use case is pretty simple: Add a new event to the list of events, render the events on the calendar.
firstly change your pushing event to object from array.
events.push({
title: 'Event added',
start: YESTERDAY
});
Now, you have many choice to do that. I will write 2 way for you.
a.
$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);
https://jsfiddle.net/7d92utp5/49/
b. 1) Change events param to function
$("#calendar").fullCalendar({
header: {
left: '',
center: 'title',
right: ''
},
// at here
events: function (start, end, timezone, callback) {
callback(events);
}
});
2) Use refetchEvents instead updateEvents
$('#calendar').fullCalendar('refetchEvents');
https://jsfiddle.net/7d92utp5/53/
I have fullcalendar on Joomla 3.72. site along with bootstrap.
The select event is not triggering
MY configuration is v1.12.4, bootstrap 3.2 and moment 2.18.1
You can see it here http://pedy.dextera.gr/index.php?option=com_elgpedy&view=personelscommittees&layout=personelscommittees&Itemid=118
by using the following credentials
user: test
password: 1234
Bellow is my code:
jQuery('#personelsComittees').fullCalendar({
locale: 'el',
selectable: true,
editable: true,
eventStartEditable : false,
selectHelper: true,
allDayDefault: true,
eventLimit: false,
select: function(start, end) {
elgInitCommitteeModal();
jQuery('#StartDateCommittee').val(start.format('YYYY-MM-DD' ));
jQuery('#EndDateCommittee').val(end.subtract(1, 'seconds').format('YYYY-MM-DD' ));
jQuery('#PersonelScheduleId').val('');
jQuery('#personelsCommitteesForm').modal({});
},
eventClick: function(calEvent, jsEvent, view) {
elgInitCommitteeModal();
if(calEvent.end === null ) calEvent.end = calEvent.start;
jQuery('#StartDateCommittee').val(calEvent.start.format('YYYY-MM-DD'));
jQuery('#EndDateCommittee').val( calEvent.end.format('YYYY-MM-DD') );
jQuery('#PersonelScheduleId').val(calEvent.PersonelScheduleId);
if(calEvent.PersonelScheduleId != '') {
elgCEFD[calEvent.PersonelScheduleId] = calEvent._id;
}
jQuery('#HealthCommitteeId').val(calEvent.HealthCommitteeId);
jQuery('#PersonelId').val(calEvent.PersonelId);
jQuery('#delTitle').text(calEvent.title);
jQuery('#delDates').text(calEvent.start.format('dddd DD/M/YYYY') + ' - ' + calEvent.end.format('dddd DD/M/YYYY'));
jQuery('#committeAskDel').show();
jQuery('#personelsCommitteesForm').modal({});
},
now: [jQuery('#RefYear').val(), jQuery('#RefMonth').val() -1, 1],
events: function(start, end, timezone, callback) {
jQuery.ajax({
url: 'index.php?option=com_elgpedy&view=' + elgview + '&format=json&Itemid=' + elgItemid,
dataType: 'json',
data: {
HealthUnitId : document.getElementById('HealthUnitId').value,
start: start.format('YYYY-MM-DD'),
end: end.subtract(1, 'seconds').format('YYYY-MM-DD')
},
success: function(response) {
showDataArea();
callback(response);
}
});
}
});
thanks in advance
Finally it was a problem with jQuery versions, as ADyson mentioned. Unfortunelly by downgrading fullcallendar did not solve my problem, because calendar needed and older jQuery version from joomla's current version.
So I make a copy of my template and I customize it so as it loads JQuery version I needed. I guess I was lucky cause no conflict rised up with other modules.
I'm using fullcalendar v2 and the sources of the events are selectable from an ul-li menu. The initial call uses the link from the first li and I may navigate through all the months in the calendar. When I use the second link, fullcalendar retrieves the events from the previous link as well as the new link. On each new select, fullcalendar remember the event sources. How can I disable this? Here my code:
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource');
// refill calendar
fillEvents(urlEvents, branchName);
});
function fillEvents(urlEvents, branchName) {
// change title of potlet box
var newTitle = '<i class="fa fa-calendar"></i> Available schedules for: ' + branchName;
$('#calendarCaption').html(newTitle);
$('#calendarSchedules').fullCalendar({
year: <?= $yy ?>,
month: <?= --$mm ?>, // javascript month is 0 based
date: 1,
header: {
left: '',
center: 'title',
right: 'prev,next,today'
},
defaultView: 'month',
firstDay: 1, // monday
editable: false,
slotEventOverlap: false,
selectable: true,
selectHelper: true,
dayRender: function (view, element) {
$('.fc td.fc-sun').css('background', '#E7EFEF');
$('.fc td.fc-sat').css('background', '#E7EFEF');
},
eventClick: function (event) {
$('#dueTime').show();
$('#duedate').val(moment(event.start).format('YYYY-MM-DD'));
$('#duetime').val(moment(event.start).format('HH:mm:ss'));
$('#isPartitionable').val(event.partitionable); // user clicked on partitionable dispo or not
}
});
$('#calendarSchedules').fullCalendar('addEventSource', urlEvents);
}
// load first branch item
$('#chgBranch li a:first').trigger('click');
I think you should destroy your calendar also. Because you are initializing fullcalendar every tine on sources change from ul-li.
Try below one.
$("#chgBranch li").on("click", function (event) {
event.preventDefault(); // To prevent following the link (optional)
var urlEvents = $(this).children('a').attr('href');
var branchName = $(this).children('a').text();
$('#calendarCaption').fullCalendar( 'destroy' );
// refill calendar
fillEvents(urlEvents, branchName);
});
This will work for sure. I tried locally and works fine.
I tried it with following method which also works fine, but #Chintan method is also fine:
$('#calendarSchedules').fullCalendar('removeEvents');
$('#calendarSchedules').fullCalendar('removeEventSource', storedEventSource);
And I store the event source in a hidden field once the calendar rendered.
I am trying to setup jquery globalize using the js/json setup suggested (for date module), using a javascript example suggested here.
In this code I am trying to set it up and the use it to format the jquery-ui datepicker:
(function () {
$(function () {
$.when(
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/likelySubtags.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-numbers-modern-master/main/en/numbers.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/numberingSystems.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-dates-modern-master/main/en/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-dates-full-master/main/en/timeZoneNames.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/timeData.json"),
$.getJSON("/Scripts/cldr/cldr-json/cldr-core-master/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load).then(function () {
var culture = "en";
Globalize(culture);
$("input.datepicker").datepicker({
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
dateFormat: Globalize.dateFormatter({ date: "short" })
});
});
});})();
And the error I get is
E_DEFAULT_LOCALE_NOT_DEFINED: Default locale has not been defined. in globalize.js # line 105
What am I doing wrong?
I used same code and had same error. Instead of:
var culture = "en";
Globalize(culture);
$("input.datepicker").datepicker({
prevText: '<i class="fa fa-chevron-left"></i>',
nextText: '<i class="fa fa-chevron-right"></i>',
dateFormat: Globalize.dateFormatter({ date: "short" })
});
I just had: Globalize.locale("en"); and that fixed it.
Make sure your function is called
Make sure all your json objects are fetched
I'm using bootstrap controls in my application. I'm trying to create a file upload control in my application.
Here is my code:
<input type="file" id="fileUploadTest" runat="server" />
<script type="text/javascript">
$(document).ready(
function () {
$('#fileUploadTest').ace_file_input({
no_file: 'No File ...',
btn_choose: 'Choose',
btn_change: 'Change',
droppable: false,
onchange: null,
thumbnail: false
});
}
);
</script>
I'm using
File upload button is not displaying.
Try this..
FIDDLE
$(document).ready(
function () {
$('#fileUploadTest').ace_file_input({
no_file: 'No File ...',
btn_choose: 'Choose',
btn_change: 'Change',
droppable: false,
onchange: null,
thumbnail: false
});
}
);
Twitter Bootstrap