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,
}
}
},
Related
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.
I have problem with Inverse Backgrounds in FullCalendar v4.0.2.
code:
let calendarEl = document.getElementById(this.element_id);
this.calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'timeGrid' ],
height: "auto",
nowIndicator : true,
defaultView: 'timeGridDay',
events: [
{
id: 2,
start: '2019-04-17 10:00:00',
end: '2019-04-17 11:00:00',
color: 'blue',
rendering: 'inverse-background'
} , {
id: 2,
start: '2019-04-17 14:00:00',
end: '2019-04-17 15:00:00',
color: 'green',
rendering: 'inverse-background'
}
]
});
this.calendar.render();
when i use this code events that share the same id wouldn't grouped together when this rendering happens.
I'm not entirely sure but I think you're using the wrong view for that type of rendering.
const el = document.querySelector("#calendar");
const calendar = new FullCalendar.Calendar(el, {
plugins: ['timeGrid'],
defaultView: 'timeGridWeek',
events: [
{
id: 2,
start: '2019-04-17 10:00:00',
end: '2019-04-17 11:00:00',
color: 'blue',
rendering: 'inverse-background'
} , {
id: 2,
start: '2019-04-17 14:00:00',
end: '2019-04-17 15:00:00',
color: 'blue',
rendering: 'inverse-background'
}
]
});
calendar.render();
https://codepen.io/anon/pen/rbJyzv 👀
I have combo box with some values. When i click the combo listed down the data. but there not align with combo box and popup listed.
any help
/**
* This is the combo box with common values
*/
var combo_1 = Ext.extend(Ext.form.ComboBox, {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px'
});
/**
* This is the form panal
*/
var form_panal = new Ext.form.FormPanel({
id:'form_panal',
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3,
combo_4
],
buttons: [ {
text: 'Save',
handler : function(){
}
},
{text: 'Cancel',
handler : function() {
}
}
]
});
enter image description here
Here is the sample code
Ext.application({
name : 'Fiddle',
launch : function() {
var combo_1 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name',
valueField: 'name',
store: {
fields: [{
name: 'name'
}],
proxy: {
type: 'memory'
},
data: [{
name: 'Android'
},{
name: 'iOS'
}, {
name: 'Windows'
}]
}
});
var combo_2 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name1',
valueField: 'name1',
store: {
fields: [{
name: 'name1'
}],
proxy: {
type: 'memory'
},
data: [{
name1: 'Blue Star'
},{
name1: 'LLoyd'
}, {
name1: 'Samsung'
}]
}
});
var combo_3 = Ext.create('Ext.form.field.ComboBox', {
editable:true,
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
anchor:'95%',
forceSelection: true,
tabIndex: 1,
labelStyle: 'width:110px',
displayField: 'name2',
valueField: 'name2',
store: {
fields: [{
name: 'name2'
}],
proxy: {
type: 'memory'
},
data: [{
name2: 'Andhra pradesh'
},{
name2: 'Telangana'
}, {
name2: 'Karnataka'
}]
}
});
/**
* This is the form panal
*/
Ext.create('Ext.form.FormPanel',{
frame:true,
bodyStyle:'padding:10px 10px 10px 10px',
buttonAlign:'center',
items: [
combo_1,
combo_2,
combo_3
],
buttons: [ {
text: 'Save',
handler : function(){
}
},{
text: 'Cancel',
handler : function() {
}
}],
renderTo: document.body
});
}
});
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
I'm trying to implement a simple grid using jqGrid, my first read example of my own.
Here is my JSON code:
$(document).ready(function() {
$("#editgrid").jqGrid({
url: '<%= ResolveUrl("~/User/index") %>',
datatype: "json",
myType: 'GET',
colNames: ['UserId', 'Surname', 'Forename', 'Pax', 'Mobile', 'Active', 'Email'],
colModel: [
{ name: 'UserId', index: 'UserId', width: 80, editable: true, editoptions: { size: 10} },
{ name: 'Surname', index: 'Surname', width: 90, editable: true, editoptions: { size: 25} },
{ name: 'Forename', index: 'Forename', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Pax', index: 'Pax', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Mobile', index: 'Mobile', width: 60, align: "right", editable: true, editoptions: { size: 10} },
{ name: 'Active', index: 'Active', width: 55, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} },
{ name: 'Email', index: 'Email', width: 100, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "20"} }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pagered',
sortname: 'Surname',
viewrecords: true,
sortorder: "desc",
caption: "Editing Example",
editurl: "detail.aspx"
});
$("#bedata").click(function() {
var gr = jQuery("#editgrid").jqGrid('getGridParam', 'selrow');
if (gr != null) jQuery("#editgrid").jqGrid('editGridRow', gr, { height: 280, reloadAfterSubmit: false });
else alert("Please Select Row");
});
});
I have the following HTML :
<table id="editgrid"></table>
<div id="pagered"></div>
<input type="button" id="bedata" value="Edit Selected" />
But when I run all this I get client code breaking within jquery-1.5.2.js (Microsoft JScript runtime error: Object doesn't support this property or method) where I can do nothing about this, this is probably of no use but here is the error below, stops at the finally part :
// resolve with given context and args
resolveWith: function( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );
}
}
finally {
fired = [ context, args ];
firing = 0;
}
}
return this;
},
Must be something simple making this crash out on me, any ideas anyone?