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.
Related
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 have being trying to populate list of data in a grid for this purpose I have used JqGrid. I have installed jqGrid plugin from nuget manager and from online tutorial I have been trying to implement the same.
This is what I have done so far:-
View:-
<h2>Search</h2>
<div class="container">
<div class="row">
<table id="tblRecruiterGrid"></table>
<div id="dvPagination"></div>
</div>
</div>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.js"></script>
<script src="~/Scripts/recruiter.js"></script>
Controller:-
public ActionResult RecruiterGridData(string sidx = "", string sord = "", int page = 1, int rows = 10)
{
var vData = recruiterRepo.GetAllByRelation();
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = vData.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
switch (sidx)
{
case "RID":
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
default:
vData = sord == "desc"
? vData.OrderByDescending(x => x.RecruiterID).ToList()
: vData.OrderBy(x => x.RecruiterID).ToList();
break;
}
var vResult = vData.Skip(pageIndex * pageSize).Take(pageSize);
var jsonData = new
{
total = totalPages,
page = page,
records = totalRecords,
rows = vResult.Select(x => new
{
RID = x.RecruiterID,
RecruiterName = x.RecruiterName,
Email = x.Email,
CompanyName = x.CompanyName,
Designation = x.Designation,
Mobile = x.Mobile
}).ToList()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Javascript:-
$(function () {
$('#tblRecruiterGrid').jqGrid({
url: "/Recruiter/RecruiterGridData/",
datatype: 'json',
mtype: 'get',
colNames: ['RID', 'Recruiter Name', 'Email', 'Company Name', 'Designation', 'Mobile'],
colModel: [{ key: true, hidden: true, name: 'RID' },
{ key: false, hidden: false, name: 'RecruiterName' },
{ key: false, hidden: false, name: 'Email' },
{ key: false, hidden: false, name: 'CompanyName' },
{ key: false, hidden: false, name: 'Designation' },
{ key: false, hidden: false, name: 'Mobile' }],
pager: '#dvPagination',
rowNum: 10,
rowList: [5, 10, 25, 50, 100],
sortname: 'RID',
sortorder: "asc",
height: 'auto',
gridview: true,
autoencode: true,
viewrecords: true,
caption: '',
emptyrecords: 'No records to display',
jsonReader: { repeatitems: false, id: 'RID' },
autowidth: true,
multiselect: false,
});
});
I'm being able to populate data in jqGrid but the paging is causing a problem. In browser developer console I'm getting a undefined error because of which the paging is not loading properly. I tried to search the problem in google but every result section pointed to include missing jqGrid file grid.locale-en.js which I have already included in my view some suggested to check if grid.locale-en.js is loaded before jquery.jqGrid.js so when I tracked down in network I got following result.
After doing lots of R&D I'm still not been able to resolve following error:-
Uncaught TypeError: Cannot read property 'integer' of undefined
Note:- Jquery libraries has already been defined in layout head section.
Please include always the exact version number of jqGrid, which you use, and the information about the fork of jqGrid (free jqGrid, Guriddo jqGrid JS or an old jqGrid in version <=4.7), which you use.
I suppose that you use some old version of jqGrid and you just used wrong name for locale (localization) file. The file name jquery-grid.locale-en.js is very suspected. The distribution of jqGrid have i18n with the file grid.locale-en.js. The usage of old jqGrid without locale file can produce the error Cannot read property 'integer' of undefined during filling the pager of jqGrid.
Another important error in your code is the usage of key: true property for more as one column. The column have to have unique values in every row. The property key: true informs jqGrid to use the contains from the column instead of the id property. You used already the option jsonReader: { repeatitems: false, id: 'RID' } which informs to use RID property of items as the rowid. This I would recommend you to remove unneeded hidden RID column from colModel and remove key: true, hidden: false from all other columns. You can remove options with default values: mtype: 'get', sortorder: "asc", caption: '' and multiselect: false.
I would recommend you to try to use free jqGrid, it's the fork of jqGrid, which I develop after Tony Tomov have changed the licence agreement of jqGrid and it's name to Guriddo jqGrid JS (see the post). Many new features, which
I implemented in free jqGrid are described in the wiki and readmes to all versions currently published.
I have created a jquery fullcalendar, pulling the feed from a google calendar and would like to open the event details in a colorbox. So far, I am completely lost as to how to achieve this and am looking for help. Everything that I have tried so far causes the calendar not to appear at all, so there is clearly a problem. Here is the latest code that I have tried:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
events: {
url: 'my feed url'
}
eventAfterRender: function(event, element, view ) {
if(event.url) {
$('a',$(element)).colorbox({
type: 'ajax'
});
}
}
})
});
</script>
I don't think I completely understand what's going on with fullcalendar's event information; so if someone can provide a working code that I can mess with, I would appreciate it. Thanks very much in advance for any help!
Simply add the eventClick property when initializing the fullcalendar object and call colorbox within,
$('#calendar').fullCalendar({
editable: true,
eventClick: function(calEvent, jsEvent, view) {
$.colorbox({html:"<h1>"+calEvent.title+"</h1><br><p>"+calEvent.start+" TO "+calEvent.end+"</p>"});
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
}
]
});
This is a very basic example. You can expand on it as per your requirements. Hope it helps.
I need to create more fields for my calendar ( fullcalendar hooked up to mysql with php ). And I have been reading up on eventRender but I'm not entirely sure of the syntax and where I should put it.
Currently I have the following;
$calendar.fullCalendar({
timeslotsPerHour : 4,
defaultView:'agendaWeek',
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: "json-events.php",
eventRender : function(calEvent, $event) {
calEvent.distributor //this is my new field
},
But I its not working and I can't find any working examples to compare it with.
Thanks
Thanks for the feedback I have been able to add my custom fields using the eventRender. So now not just body and description are being passed.
My main issue now is passing the date values to the database as these are not being saved. Does anyone know of any examples where this is being used. I would really really appreciated it.
In version 4 of fullcalendar, to get non-standard field is changed a little bit. Now it accepts just one parameter as Event Object:
events: [
{
title: 'My Event',
start: '2010-01-01',
description: 'This is a cool event'
}
// more events here
],
eventRender: function(info) {
console.log(info.event.extendedProps.description);
}
Note: You can access an additional field in this way: info.event.extendedProps.description
Check documentation
you can include your own non-standard fields in each Event Object. FullCalendar will not modify or delete these fields.,this example help you eventRender
and see Event Object
Here is how I used eventRender to add some categories to each event. Then I can filter events based on category name
eventRender: function(event, element) {
element.attr("categories",event.categoryname)
}
Simply awesome calendar
Some attributes here:
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
backgroundColor: "#00a65a", //Success (green)
borderColor: "#00a65a" //Success (green)
},
The jqGrid has been kicking my butt (as well as others on this site). I can't seem to get the JSON data from the webservice to load into the jqGrid when using the addJSONData method.
Does anyone know if this is possible to do? I am not using MVC just a plain WebProject webservice in ASP.NET 3.5.
I am using the latest version of jqGrid 3.5.
I don't know what to do. I am currently trying to load just 1 row that I am returning a string in my WS like this:
"Page:1,Total:1,Records:1,Rows:[name: Jeff V title: Programmer]"
Which is then passed into my javascript as:
{"d":"Page:1,Total:1,Records:1,Rows:[name: Jeff Vaccaro title: Programmer]"}
My jQuery code is the following:
jQuery(document).ready(function () {
jQuery("#list").jqGrid({
datatype: processrequest,
mtype: 'POST',
colNames: ['Name', 'Title'],
colModel: [
{ name: 'name', index: 'name', width: 55 },
{ name: 'title', index: 'title', width: 90 }
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'My first grid'
});
});
function processrequest(postdata) {
$(".loading").show();
$.ajax({
type: "POST",
data: "{}",
datatype: "clientside",
url: "../webServices/myTestWS.asmx/testMethod",
contentType: "application/json; charset-utf-8",
complete: function (jsondata, stat) {
if (stat == "success") {
jQuery("#list")[0].addJSONData(eval("(" + jsondata.responseText + ")"));
$(".loading").hide();
} else {
$(".loading").hide();
alert("Error with AJAX callback");
}
}
});
}
I've tried all sorts of different variations of the addJSONData code. Does anyone know if this is possible to do?
Any help is appreciated!
Thanks
First of all your web service should return a class instance with properties page, total, records, rows and so on. If web method has attribute [ScriptMethod (ResponseFormat = ResponseFormat.Json)] the class instance will be correct converted to the the JSON data.
You can use ajaxGridOptions: { contentType: 'application/json; charset=utf-8' } parameter and jsonReader (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_data) to load data in the jqGrid. Information from Jqgrid 3.7 does not show rows in internet explorer and Best way to change jqGrid rowNum from ALL to -1 before pass to a web service could be helpful for you.
At the end imgpath is no more supported in version 3.5 of jqGrid.