Related
Im trying to create events with a range of time, but when i go to day or week view they show really weird. I have read a lot of questions but I couldnt fix it. I tried with allDay set to false, but the problem is not there.
I did download the library again. I also did disable all the css (except bootstrap), but the problem is still there.
let calendarEl = document.getElementById('calendar');
let calendar = new FullCalendar.Calendar(calendarEl, {
aspectRatio: 2,
plugins: [ 'dayGrid', 'interaction', 'timeGrid' ],
allDayDefault: false,
editable: true,
eventLimit: true,
selectable: true,
selectHelper: true,
locale: 'es',
header: {
left: "prev,next",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
},
events:[
{
title: 'All Day Event',
start: '2019-08-01',
},
{
title: 'Long Event',
start: '2019-08-07',
end: '2019-08-10'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-09T16:00:00'
},
{
groupId: 999,
title: 'Repeating Event',
start: '2019-08-16T16:00:00'
},
{
title: 'Conference',
start: '2019-08-11',
end: '2019-08-13'
},
{
title: 'Meeting',
start: '2019-08-12T10:30:00',
end: '2019-08-12T12:30:00'
},
{
title: 'Lunch',
start: '2019-08-12T12:00:00'
},
{
title: 'Meeting',
start: '2019-08-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2019-08-12T17:30:00'
},
{
title: 'Dinner',
start: '2019-08-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2019-08-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2019-08-28'
}
]});
calendar.render();
calendar.updateSize();
https://imgur.com/dfQncpa
I am working on Fullcalendar selectable jquery. I need to use it in wordpress. I have created a template file and call the calendar div in template file and include css files "fullcalendar.css" and "fullcalendar.print.css" in header and "moment.min.js" and "fullcalendar.min.js" in footer. It is only showing calendar without any css effect and not working selectable event. Files are included correctly and not showing any javascript error. I am using this fullcalendar script. I have tried to deactivate all plugins.
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-08-05',
theme: true,
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:'); alert(title);
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-08-09'
},
{
title: 'Long Event',
start: '2016-08-07',
end: '2016-08-15'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-06-16T16:00:00'
},
{
title: 'Conference',
start: '2016-06-11',
end: '2016-06-13'
},
{
title: 'Meeting',
start: '2016-06-12T10:30:00',
end: '2016-06-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-06-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-06-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-06-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-06-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-06-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-06-28'
}
]
});
});
My issue has been resolved.I was adding "fullcalendar.print.css" after "fullcalendar.min.css". When i commented "print.css" file then it started working fine.
As I mentioned in the question title I need to trigger an event as soon as Shield-ui grid editable cell textbox destroyed. Couldnt find a solution in their documentation.Any help would be appreciable. Thank you.
Here is my code so far ...
$("#allTransGrid").shieldGrid({
dataSource: {
data: datad,
schema: {
fields: {
mbr_id: {path: "mbr_id", type: String},
lon_id: {path: "lon_id", type: String},
center_name: {path: "center_name", type: String},
grp_name: {path: "grp_name", type: String},
mbr_name: {path: "mbr_name", type: String},
lon_amt: {path: "lon_amt", type: Number},
lon_int_amt: {path: "lon_int_amt", type: Number},
loan_total: {path: "loan_total", type: Number},
ind_inst: {path: "ind_inst", type: Number},
today_pay: {path: "today_pay", type: Number, nullable: false},
lon_id_as: {path: "lon_id_as", type: Number}
}
}
},
sorting: {
multiple: true
},
paging: {
pageSize: 12,
pageLinksCount: 10
},
selection: {
type: "row",
multiple: true,
toggle: false
},
columns: [
{field: "mbr_id", width: "100px", title: "Member ID"},
{field: "lon_id", width: "100px", title: "Loan ID"},
{field: "center_name", title: "Center Name", width: "100px"},
{field: "grp_name", title: "Group Name", width: "70px"},
{field: "mbr_name", title: "Member Name", width: "170px"},
{field: "lon_amt", title: "Loan Amount", width: "100px"},
{field: "lon_int_amt", title: "Interest", width: "100px"},
{field: "loan_total", title: "Total", width: "80px"},
{field: "ind_inst", title: "Installment Amount", width: "120px"},
{field: "today_pay", title: "Today Payment"}
],
events: {
editorCreating: function (e) {
if (e.field == "ind_inst") {
e.options = {enabled: false, max: 1000};
}
if (e.field == "loan_total") {
e.options = {enabled: false, max: 500000};
}
if (e.field == "lon_int_amt") {
e.options = {enabled: false, max: 100000};
}
if (e.field == "lon_amt") {
e.options = {enabled: false, max: 100000};
}
if (e.field == "mbr_name") {
e.options = {enabled: false};
}
if (e.field == "grp_name") {
e.options = {enabled: false};
}
if (e.field == "center_name") {
e.options = {enabled: false};
}
if (e.field == "lon_id") {
e.options = {enabled: false};
}
if (e.field == "mbr_id") {
e.options = {enabled: false};
}
if (e.field == "today_pay") {
e.options = {max: 10000};
}
},
detailCreated: function (e) {
$.ajax({
url: "PaymentCatcherGroupBy",
cache: false,
dataType: 'JSON',
data: {loan_id: e.item.lon_id_as, c_id: center_id},
success: function (data) {
$("<div/>")
.appendTo(e.detailCell)
.shieldGrid({
dataSource: {data: data},
sorting: {
multiple: true
},
paging: {
pageSize: 5
},
columns: [
{field: "installment_num", title: "Week", editable: false},
{field: "installmentAmount", title: "Installment Amount", editable: false},
{field: "paidAmount", title: "Paid Amount", editable: false},
{field: "dueDate", title: "Date Paid", type: Date, editable: false}
], editing: {enabled: false}
});
}, error: function (jqXHR, textStatus, errorThrown) {
alert('error');
}
});
},
command: function (e) {
//selectionChanged doesnt work here....
if (e.commandName == "selectionChanged") {
var toBeSelected = e.toBeSelected;
console.log(toBeSelected);
// e.cancel = true;
}
}
},
editing: {
enabled: true,
event: "doubleclick",
type: "cell"
},
scrolling: true,
height: 600
});
After focus lost of the textbox I need to trigger an event :
There is no destroy event, associated with any of the editors in the control, when in edit mode.
One option, depending on the final goal that you have would be to subscribe to the command event:
http://www.shieldui.com/documentation/grid/javascript/api/events/command
which should be triggered on save, after an edit.
If that is not an option, please supply some additional information on what is the exact end result that you are after.
I'm using fullcalendar-2.6.0 and fullcalendar-scheduler-1.2.0.
Below is my code:
$('#calendar').fullCalendar({
resourceAreaWidth: 230,
now: '2016-02-15',
lang: 'fr',
editable: true,
aspectRatio: 1.5,
scrollTime: '00:00',
header: {
left: 'promptResource today prev,next',
center: 'title',
},
customButtons: {
promptResource: {
text: '+ room',
click: function() {
var title = prompt('Room name');
if (title) {
$('#calendar').fullCalendar(
'addResource',
{ title: title },
true // scroll to the new resource?
);
}
}
}
},
defaultView: 'timelineWeek',
views: {
timelineWeek: {
slotDuration: { days: 1 }
}
},
resourceLabelText: 'PK',
resources: [
{ id: 'a', title: '163+000' },
{ id: 'b', title: '164+000', eventColor: 'green' },
{ id: 'c', title: '165+000', eventColor: 'orange' },
{ id: 'd', title: '166+000' },
{ id: 'e', title: '167+000' },
{ id: 'f', title: '168+000', eventColor: 'red' },
{ id: 'g', title: '169+000' },
{ id: 'h', title: '170+000' },
{ id: 'i', title: '171+000' },
{ id: 'j', title: '172+000' },
{ id: 'k', title: '173+000' },
{ id: 'l', title: '174+000' }
],
events: [
{ id: '1', resourceId: 'b', start: '2016-02-15', end: '2016-02-16', title: 'event 1' },
{ id: '2', resourceId: 'c', start: '2016-02-15', end: '2016-02-17', title: 'event 2' },
{ id: '3', resourceId: 'd', start: '2016-02-16', end: '2016-02-17', title: 'event 3' },
{ id: '4', resourceId: 'e', start: '2016-02-17', end: '2016-02-18', title: 'event 4' },
{ id: '5', resourceId: 'f', start: '2016-02-18', end: '2016-02-19', title: 'event 5' }
]
});
The result:
I want to switch the axis
I nedd to have resources on the top and time slots on the left axis.
Thank you very much for your help.
Set the defaultView property to agendaDay.
for e.g.
defaultView: 'agendaDay';
I read the link you just sent me.
Below is my code:
$('#calendar').fullCalendar({
defaultView: 'week',
defaultDate: '2016-02-15',
now: '2016-02-16',
lang: 'fr',
editable: true,
selectable: true,
eventLimit: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'week'
},
views: {
week: {
type: 'agenda',
duration: { days: 7 },
groupByResource: true
}
},
//// uncomment this line to hide the all-day slot
allDaySlot: false,
events: [
{ id: '1', resourceId: 'a', start: '2016-02-16', end: '2016-02-17', title: 'event 1' },
{ id: '2', resourceId: 'a', start: '2016-02-18', end: '2016-02-19', title: 'event 2' },
{ id: '3', resourceId: 'b', start: '2016-02-18', end: '2016-02-20', title: 'event 3' },
{ id: '4', resourceId: 'c', start: '2016-02-18', end: '2016-02-19', title: 'event 4' },
{ id: '5', resourceId: 'd', start: '2016-02-17', end: '2016-02-18', title: 'event 5' }
],
resources: function (callBack) {
callBack([
{ id: 'a', title: '163+000', altTitle: '163+000' },
{ id: 'b', title: '164+000', altTitle: '164+000' , eventColor: 'green' },
{ id: 'c', title: '165+000', altTitle: '165+000' , eventColor: 'orange' },
{ id: 'd', title: '166+000', altTitle: '166+000' , eventColor: 'red' }
]);
},
resourceRender: function (dataTds, eventTd) {
console.log('resourcerender');
console.log(eventTd);
console.log(dataTds);
var textElement = eventTd.empty();
textElement.append('<b>' + dataTds.altTitle + '</b>');
},
});
Below is the result:
I want days on the left side not hours
The result is much better than before but I still need to have days on the left side, not hours. I don't need days on the top side.
Thank you again for your help.
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
});
}
});