Develop Reference

Using draggable for fullcalendar without es6 and import

I am using fullcalendar the non-es6 way, quite honestly because the bundled file was so large it was crashing stuff. Anyway, so I have loaded all the js files manually and all is well. Now I am trying to use Draggable. On the docs https://fullcalendar.io/docs/external-dragging it only shows you how to import Draggable from the interaction plugin. I have the interaction plugin up and running as I can drag events around on the calendar no problem, in fact I am editing bookings in Woo Bookings from them as they are dropped. I am now trying to drag resources from outside the calendar into the calendar and create bookings from them. I am getting Plugin file not loaded for draggable error in console, and of course Uncaught ReferenceError: Draggable is not defined
Here is my code
calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
plugins: [ 'resourceTimeline', 'interaction' ],
eventOverlap: false,
resourceGroupField: 'groupID',
resourceGroupText: 'groupText',
defaultView: 'resourceTimelineDay',
nowIndicator: true,
droppable: true,
defaultDate: currDate,
eventRender: function(info) {
$(info.el).find('.fc-content').attr("id", "event-" + info.event.id);
},
eventClick: function(info) {
info.jsEvent.preventDefault();
jQuery.colorbox({
href: wsccAppVars.standardajax,
data: {
action: 'fullcal_get_booking',
booking_id: info.event.id,
resource_id: info.event.resourceId
}
})
},
themeSystem: 'standard',
editable: true,
eventStartEditable: false,
eventDurationEditable: false,
resources: fcresources,
resourceColumns: [{
labelText: 'Lagoon',
field: 'lname'
}, {
labelText: 'Product',
field: 'pname'
}],
eventSources: [{
url: wsccAppVars.adminajax, // use the `url` property
color: 'yellow', // an option!
textColor: 'black' // an option!
}],
eventDrop: function(info) {
//console.log(info);
var data = {
booking_id: info.event.id,
resource_id: info.newResource.id,
protect: $("#calendar").data('cal-protect'),
action: 'wbsc_cal_booking_change'
}
//console.log(data);
$.post(wbscAppVars.standardajax, data, function(response) {
$("#calendar_messages").text(response.return_message)
if (!response.success) {
info.revert();
}
})
}
});
containerEl = document.getElementById('draggable_resources');
new Draggable(containerEl, {
itemSelector: '.draggable_resource'
});
calendar.render();```

How to get Regular Expression in IgGrid cell (Infragistics)?

how can i have a regular expression on a igTextEditor in igGrid Updating?
i tried to use validate option but it didn't worked.
$("#schedulerTable").igGrid({
columns: $scope.schedulerColumns,
width: "87%",
height: "300px",
fixedHeaders: true,
autoGenerateColumns: false,
autofitLastColumn: true,
autoCommit: true,
renderCheckboxes: true,
responseDataKey: "results",
dataSource: $scope.schedulerData,
updateUrl: "",
primaryKey: 'Id',
features: [
{
name: "Updating",
generatePrimaryKeyValue: function (evt, ui) {
nextPrimarykey -= 1;
ui.value = nextPrimarykey;
},
enableAddRow: true,
enableDeleteRow: true,
editMode: "row",
columnSettings: [
{
columnKey: "Id",
editorType: "numeric",
editorOptions: {
readOnly: true
}
}, {
columnKey: "Time",
editorType: "text",
editorOptions: {
},
validatorOptions: {
regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\#\w{2,10}\.\w{1,10}$/,
onblur: true,
onchange: true
},
required: true,
validation: true,
defaultValue: "00:00"
},
{
columnKey: "Mo"
},
{
columnKey: "Tu"
},
{
columnKey: "We"
},
{
columnKey: "Th"
},
{
columnKey: "Fi"
}]
}]
});
i want to achive a time picker in the Time Column but that doesn't exist so i try to get only time in the textEditor by regular expression.
the grid gets loaded with columns named Time, Mo- Friday.
if you click on add in grid you can click in the input field and fill your time. the time should get validated before clicking on done and show a error message.
to see how the table look like: https://codepen.io/ablablabla/pen/PJLbJz

The lack of validation is because the validatorOptions belong to the editorOptions (as those get passed down to whatever editor you choose as provider). The validation: true only gets some defaults, which really won't do much for a text field besides the required.
And then the RegExp option (which is for an email in the snippet above as far as I can tell) has been pattern since 15.2 :) So in the end for that time column you can try:
//...
editorOptions: {
validatorOptions: {
pattern: /^\d{1,2}\:\d{2}$/,
onblur: true,
onchange: true
},
},
//..
Here's an updated codepen: https://codepen.io/anon/pen/YrgYxj
Edit: Or if you want to set the error message:
//...
editorOptions: {
validatorOptions: {
pattern: {
expression: /^\d{1,2}\:\d{2}$/,
errorMessage: "Time should match a pattern like 00:00"
},
onblur: true,
onchange: true
},
},
//..
Depending on your goals you could also use a Mask Editor or a Date Editor as provider. Also the obligatory docs link: https://www.igniteui.com/help/iggrid-updating
P.S. Bind to an empty array to avoid the error for that first row that has no values and more importantly primary key.

datepicker not working in jqgrid

I am working on jqgrid application. In my previous post (Update and Delete does not work in jqGrid) I am posted information about my grid. Now, I have a problem about datepicker on add/edit dialog.
I have same problem as the one person posted earlier post DateTimePicker not working inside jqGrid. But it's working outside of it. I was installed plugin http://plugins.jquery.com/datetimepicker/. In definition of my grid I wrote:
{
name: 'PostingDate', index: 'PostingDate', align: "center", editable: true, edittype: "text", formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: {
dataInit: function (el) {
$(el).datetimepicker({
dateFormat: 'dd-M-yy',
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}
}
},
Also, I am added onInitializeForm in:
jQuery("#generalLedgerGrid").jqGrid('navGrid', '#generalLedgersPager',
{ edit: true, add: true, del: true },
{
closeAfterEdit: true,
onInitializeForm: function (formid) {
$("#PostingDate", formid).datetimepicker();
}
},
{
closeAfterAdd: true,
onInitializeForm: function (formid) {
$("#PostingDate", formid).datetimepicker();
}
},
...
}
When I implement this, i am not getting an error. The page loads up, but when I try to click Add or Edit, the popup window refuses to show up. How can solve that problem? Appreciate your help, Thanks.

Fullcalender start with current month and next month in view

I have fullcalendar and which start from 2015 Jan, I want to start and show as default with current month and next month.
Please advice - I have below code
$('#calendar').fullCalendar({
theme: true,
//now: gotoDate(CurrentDate),//'2015-08-07',
editable: true,
aspectRatio: 2.1,
scrollTime: '00:00',
selectable: true,
selectHelper: true,

http://fullcalendar.io/docs/current_date/defaultDate/
Have you tried specifying a defaultDate?

Yes i did try defaultDate already, it wont work
I already have this
defaultView: 'timelineYear',
views: {
timelineDay: {
buttonText: ':10 slots',
slotDuration: '00:15'
},
timelineTenDay: {
type: 'timeline',
duration: { days: 10 }
}
},
and need to view current month and next month

Jqgrid search option for local datatype not working

I want to add search option for my jqgrid table,
$('#jqgrid').jqGrid({
datatype: 'local',
data: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colNames: ['title', 'color', 'fontsize'],
colModel: [
{name: 'config.titlepage.title' },
{name: 'config.titlepage.color' },
{name: 'config.titlepage.fontsize' },
],
pager: '#pageGrid'
localReader: {
id: "_id.$oid"
}
});
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
I'm getting the search option but when I enter the search string and click on Filter button, search is happening.
Please help me here, do I need add any library files to perform for this search filter?

I'm not sure which problem with searching you have. The only clear error is: you skip one {} in the list of navGrid. You current option of navGrid set delete options as searching options. Correct option will be
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
Additionally you can consider to add ignoreCase: true option to the grid to make searching case insensitive. The demo seems to work correctly.
Another option which you can use to read the same data: to use datatype: 'jsonstring'. In the case you can use jsonmap and choose more readable name property. In the case the internal data of grid will contains only the data which you need. The demo demonstrate this approach. It uses the following code
var mydata = [
{
"_id": {"$oid": "50a3f962b7718da1a3090fa9"},
"config": { "titlepage": { "title": "My First Title", "color": true,
"fontsize": "42/44" } } }
];
$('#jqgrid').jqGrid({
datatype: 'jsonstring',
datastr: mydata,
caption: 'Titlepage Parameters',
gridview: true,
height: 'auto',
colModel: [
{name: 'title', jsonmap: "config.titlepage.title" },
{name: 'color', jsonmap: "config.titlepage.color" },
{name: 'fontsize', jsonmap: "config.titlepage.fontsize" },
],
pager: '#pageGrid',
jsonReader: {
repeatitems: false,
id: "_id.$oid"
}
});
$('#jqgrid').jqGrid('navGrid', "#pageGrid",
{ search: true, edit: false, add: false, del: false, refresh: false }, {}, {}, {},
{ recreateFilter: true, overlay: true, multipleSearch: true, multipleGroup: true});
In any way I don't see any problem with searching in both demos.