Fullcalendar headerToolbar button displays as two buttons - fullcalendar

I am testing fullcalendar/angular 5 in ionic 5 app and the header toolbar for views displays as two buttons:
This is my calendar options:
calendarOptions: CalendarOptions = {
contentHeight: "auto",
headerToolbar: {
left: 'title',
center: 'timeGridMes, timeGridDia',
right: 'prev,next today'
},
initialView: 'timeGridDia',
weekends: true,
editable: false,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
allDaySlot:false,
initialDate: new Date(),
firstDay: 1,
fixedWeekCount: false,
locale: 'es',
slotMinTime : "08:00:00",
slotMaxTime : "23:00:00",
navLinks: true,
nowIndicator: true,
slotDuration: "00:15:00",
slotLabelInterval: "00:15:00",
eventTimeFormat: { hour12: false, hour: '2-digit', minute: '2-digit' },
showNonCurrentDates: true,
timeZone: 'local',
weekNumbers: true,
weekText: "S",
buttonText: {
today: 'Hoy'
},
views: {
timeGridMes: {
type: 'dayGridMonth',
dayMaxEventRows: 4,
buttonText: 'Mes',
titleFormat: { year: 'numeric', month: 'short'}
},
timeGridDia: {
type: 'timeGridDay',
buttonText: 'Día',
titleFormat: { month: 'short', day: 'numeric' }
}
},
select: this.handleDateSelect.bind(this),
eventClick: this.handleEventClick.bind(this),
eventsSet: this.handleEvents.bind(this)
};
and this is html that it generates:
<div class="fc-toolbar-chunk">
<div class="fc-button-group">
<button class="fc-timeGridMes-button fc-button fc-button-primary" type="button">Mes</button>
<button class="fc--button fc-button fc-button-primary" type="button"></button>
</div>
<button class="fc-timeGridDia-button fc-button fc-button-primary fc-button-active" type="button">Día</button>
</div>
Why generate the div with class = "fc-button-group" with two buttons?

Removing the commas in the string solves the problem...:
headerToolbar: {
left: 'title',
center: 'timeGridMes timeGridDia',
right: 'prev next today'
},
https://github.com/fullcalendar/fullcalendar/issues/5821#issue-701022933

Related

FullCalendar Scheduler - nowIndicator only works with initialView as Day

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,
}
}
},

Only show description in dayGridMonth

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.

Fullcalendar - change event color on select

I'm trying to set a default title and background color when selecting an event on fullcalendar. but the event is customized only after rendering it and not during its selection. Any idea? thx for your help.
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'agendaWeek',
navLinks: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var eventData;
eventData = {
title: 'unavailable',
start: start,
end: end,
backgroundColor: 'red',
};
$('#calendar').fullCalendar('renderEvent', eventData, true);
$('#calendar').fullCalendar('unselect');
},
editable: true,
});
});
This is a jsfiddle

Excess rows Full Calendar

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).

JQ Grid Tool bar search for Date column

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()})

Resources