Like the title says, I'm using the the FullCalendar Scheduler but I can't seem to make the nowIndicator to work with the initialView as resourceTimelineMonth or resourceTimelineWeek. The indicator stays at the 00:00 of the day.
It only works fine if the initialView is set to resourceTimelineDay.
My code:
<FullCalendar
v-if="employeeList && absenceList"
:options="calendarOptions"
/>
(...)
data() {
return {
employeeList: null,
absenceList: null,
calendarOptions: {
plugins: [ resourceTimelinePlugin ],
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
},
locales: allLocales,
locale: this.$i18n.locale,
initialView: 'resourceTimelineMonth',
resourceGroupField: 'department',
resourceAreaHeaderContent: 'Colaboradores ',
resourceOrder: 'department,title',
nowIndicator: true,
businessHours: [
{
daysOfWeek: [ 1, 2, 3, 4, 5 ],
startTime: null,
endTime: null,
}
],
height: 600,
resources: this.getEmployeesArray,
events: this.getApprovedAbsencesArray,
}
}
},
I need to work with extendedProps, but when i try to show info.event.extendedProps.description in timeGridWeek or timeGridDay it doesn't (it say "undefined"), only in dayGridMonth. I have read the docs, but i don't know how to show these non-standard properties.
The events are displayed correctly.
(Sorry for my poor english)
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid', 'interaction', 'bootstrap', 'timeGrid', 'rrule' ],
height: 'parent',
header: {
left: 'prev,next today',
center: 'title',
right: 'timeGridDay,timeGridWeek,dayGridMonth'
},
titleFormat: {
year: 'numeric',
month: 'long',
day: '2-digit'
},
defaultView: 'timeGridWeek',
themeSystem: 'bootstrap',
selectable: true,
editable: true,
navLinks: true,
weekNumbers: true,
nowIndicator: true,
locale: 'es',
minTime: '08:00:00',
maxTime: '22:00:00',
weekends: false,
eventOrder : 'color',
eventSources: [
'carga_citas.php',
'carga_sesiones.php'
],
eventClick: function(info) {
alert(info.event.extendedProps.description);
}
});
calendar.render();
});
</script>
Thanks for your replies.
Note: Multiple business hours was made available in this commit: https://github.com/dtmonterrey/fullcalendar/commit/d9848d0ae7d7dae0f0340c62ce38b8acc0d03b62
I'm working with FullCalendar and I have an excess row after I've set:
scrollTime: "08:00:00",
minTime: "08:00:00",
maxTime: "19:00:00",
Image
Full Code
$(document).ready(function () {
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
scrollTime: "08:00:00",
minTime: "08:00:00",
maxTime: "19:00:00",
weekNumbers: true,
firstDay: 1,
allDaySlot: false,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectConstraint: 'businessHours',
eventConstraint: 'businessHours',
selectHelper: true,
select: function (start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
businessHours: [
{
start: '09:00',
end: '17:00',
dow: [1, 2, 3, 5, 6]
},
{
start: '09:00',
end: '19:00',
dow: [4]
}
]
});
});
Any ideas?
I have the exact issue as you, using FullCalendar v2.4.0. I think the best option would be changing the aspectRatio property from 1.35 to 1.5 (or any larger float number).
I am new to JQGrid, i am developing a screen where i need to use a tool bar in JQ Grid and perform search operation accordingly.
I have a date field in my JqGrid and i have added the DtPicker in the Search option also.
But when i select the date from DTPicker, search for the selected date is not performed.
Please let me know how to perform search for selected date.
<table id="test">
</table>
<div id="divtest">
</div>
<div>
<asp:Label ID="count" runat="server" Text="Label"></asp:Label>
</div>
<script type="text/javascript">
$(document).ready
(
function CreateGrid()
{
var lastSel,lastSel1, Status = ["All", "Active", "InActive"],defaultStatus="Active";
jQuery("#test").jqGrid
(
{
url:'Test.aspx',
datatype:'json',
contentType: "application/json; charset=utf-8",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
colNames:[ 'EMPID',
'EMPName',
'DOB',
'Designation',
'Genders',
'Status',
'Remarks',
'EMPType',
''
],
colModel:
[
{
name:'EMPID',
index:'EMPID',
width:120,
sorttype:'int',
editable:false,
key:true,
sortable: true,
search:true,
editoptions:{readonly:true}
},
{
name:'EMPName',
index:'EMPName',
width:250,
sortable: true,
align:"left",
editable:true,
size:100,
editrule:{custom:true,custom_func:checkName}
},
{
name:'DOB',
index:'DOB',
width:250,
sortable: true,
align:"left",
size:100,
editable:true,
sorttype:"date",
formatter: "date",
formatoptions: {newformat:'m/d/Y'},
editrule:{custom:true,custom_func:checkName}
,editoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui){
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
}
,searchoptions:
{"dataInit":function(el)
{setTimeout(function(){if(jQuery.ui) {
if(jQuery.ui.datepicker)
{
jQuery(el).datepicker({"disabled":false,
"dateFormat":"mm/dd/yy"
,changeMonth: true,
changeYear: true,
recreateForm: true});
jQuery('.ui-datepicker').css({'font-size':'69%'});
}
}},100);}
},
search:true
},
{
name:'Designation',
index:'Designation',
width:250,
align:"left",
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value:"0:select;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer; 6:Tester;7:Sales;8:Others"}
,editrule:{custom:true,custom_func:checkDropDown}
,stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:CEO;2:HR;3:Manager;4:Team Lead;5:Software Engineer;6:Tester;7:Sales;8:Others"
}
},
{
name:'Gender',
index:'Gender',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Male;2:Female"},
editrule:{custom:true,custom_func:checkDropDown},
stype:'select',
searchoptions: {
sopt:['eq'],value:":All;1:Male;2:Female"
}
},
{
name:'Status',
index:'Status',
width:150,
align: 'left',
editable:true,
size:100,
sortable: true,
formatter:'select',
edittype: 'select',
editoptions: {value: "0:select;1:Active;2:InActive"}
,editrule:{custom:true,custom_func:checkDropDown},
stype:'select'
,searchoptions: {
sopt:['eq'],value:":All;1:Active;2:InActive"
}
},
{
name:'Remarks',
index:'Remarks',
width:150,
sortable: true,
align:"left",
editable:true,
edittype:"textarea",
editoptions:{rows:'3',cols:'10'},
size:100
},
{
name:'Emptype',
index:'Emptype',
sortable: true,
formatter:'checkbox',
editable:true,
edittype:"checkbox",
stype:'select',
searchoptions: {
sopt:['eq','ne'],value:":All;true:In;false:Out"
}
},
{
name:'action',
index: 'action',
sortable:false,
align:'center',
formatter:"actions",
formatoptions:{key:true},
search:false
}
],
rowNum:10,
rowList:[2,5,10,15],
pager:'#divtest',
viewrecords:true,
width:0.96*screen.width,height:0.42*screen.height,
caption:'jqGrid',
emptyrecords: "No Results Found",
sortable:true,
sortorder: "desc",
search:true,
ignoreCase:true,
loadonce:true,
multiselect: true,
shrinkToFit:true,forceFit:true
,editurl:"Test4.aspx",
onAfterSaveCell:
function reload(result)
{
$("#grid").trigger("reloadGrid");
}
,onSelectRow:
function (id)
{ var tr;
if (id && id !== lastSel)
{
if (typeof lastSel !== "undefined")
{
$("#test").jqGrid('restoreRow', lastSel);
$("#test").trigger("reloadGrid",[{current:true}]);
}
lastSel = id;
}
}
}
).jqGrid('navGrid','#divtest',
{ edit:false,
add:true,
del:false,
search:false
},
//for Edit
{
},
//for Add
{
top:0.20*screen.height,
left:(screen.width-(0.65*screen.width)),
width: 0.35*screen.width,
align:'Center',
resizeable: true,
closeAfterAdd:true,
reloadAfterSubmit:true,
serializeEditData: function(data)
{
return (data);
},
beforeShowForm: function(form)
{
$("#DOB").datepicker
({
changeMonth: true,
recreateForm: true,
changeYear: true
});
}
},
//for Delete
{
},
//for Search
{ multipleSearch: true,
multipleGroup:true,
//showQuery: true,
closeOnEscape: true,
closeAfterSearch: true,
overlay: 0,
beforeShowSearch:function()
{
$("#test")[0].toggleToolbar();
},
onClose: function()
{
$("#test")[0].toggleToolbar();
}
}
).jqGrid('navButtonAdd','#divtest',
{
caption:" ",
width:'15',
buttonicon:"ui-icon-search",
onClickButton: function()
{
$("#test")[0].toggleToolbar();
},
position:"last"
})
//For displaying the blank tool bar on the grid
.jqGrid('filterToolbar',
{
stringResult: true,
searchOnEnter: false,
defaultSearch: "cn"
}
)
.jqGrid('inlineNav',"#pager",{
edit:false,
editicon: "ui-icon-pencil",
add:true,
addicon:"ui-icon-plus",
cancel: true,
cancelicon:"ui-icon-cancel",
save: true,
saveicon:"ui-icon-disk"
}
);
//The Date DTPicker field in the Edit portion.
var initDateEdit =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
,
//The Date DTPicker field in the Search portion.
//But not working in this.
initDateSearch =
function(elem)
{
setTimeout(function()
{
$(elem).datepicker(
{
dateFormat: 'mm/dd/yy',
autoSize: true,
//showOn: 'button',
changeYear: true,
changeMonth: true,
showButtonPanel: true,
recreateForm: true,
showWeek: true
});
},100);
}
;
//To hide the check box or select box in the Header of the JQGrid.
var myGrid = $("#test");
$("#cb_"+myGrid[0].id).hide();
var grid = $("#test"),
getColumnIndexByName = function (grid, columnName)
{
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++)
{
if (cm[i].name === columnName)
{return i;}
}
return -1;
};
}
);
</script>
Thanks and Regards,
NMB
You just need to add this after your Filter tool bar..
.change(function(){$("#table_ID")[0].toggleToolbar()})