Uncaught SyntaxError: Invalid or unexpected token- JQuery Calendar - javascript

I have this script that is showing me "Uncaught SyntaxError: Invalid or unexpected token" error. Funny thing is that it works flawlessly on another laptop but on the other it doesn't. It's basically a calendar.
$(document).ready(function() {
/*
==========================================================================
Fullcalendar
========================================================================== */
$('#calendar').fullCalendar({
header: {
left: '',
center: 'prev, title, next',
right: 'today agendaDay,agendaTwoDay,agendaWeek,month'
},
buttonIcons: {
prev: 'font-icon font-icon-arrow-left',
next: 'font-icon font-icon-arrow-right',
prevYear: 'font-icon font-icon-arrow-left',
nextYear: 'font-icon font-icon-arrow-right'
},
defaultDate: '2017-01-01',
editable: true,
selectable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-01-01'
},
{
title: 'Long Event',
start: '2017-01-07',
end: '2017-01-10',
className: 'event-green'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-09T16:00:00',
className: 'event-red'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-01-16T16:00:00',
className: 'event-orange'
},
{
title: 'Conference',
start: '2017-01-11',
end: '2017-01-13',
className: 'event-coral'
},
{
title: 'Meeting',
start: '2017-01-12T10:30:00',
end: '2017-01-12T12:30:00',
className: 'event-green'
},
{
title: 'Lunch',
start: '2017-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-01-12T14:30:00',
className: 'event-red'
},
{
title: 'Happy Hour',
start: '2017-01-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-01-12T20:00:00',
className: 'event-orange'
},
{
title: 'Birthday Party',
start: '2017-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-01-28',
className: 'event-coral'
}
],
viewRender: function(view, element) {
// При переключении вида инициализируем неÑтандартный Ñкролл
if (!("ontouchstart" in document.documentElement)) {
$('.fc-scroller').jScrollPane({
autoReinitialise: true,
autoReinitialiseDelay: 100
});
}
$('.fc-popover.click').remove();
},
eventClick: function(calEvent, jsEvent, view) {
var eventEl = $(this);
// Add and remove event border class
if (!$(this).hasClass('event-clicked')) {
$('.fc-event').removeClass('event-clicked');
$(this).addClass('event-clicked');
}
// Add popover
$('body').append(
'<div class="fc-popover click">' +
'<div class="fc-header">' +
moment(calEvent.start).format('dddd • D') +
'<button type="button" class="cl"><i class="font-icon-close-2"></i></button>' +
'</div>' +
'<div class="fc-body main-screen">' +
'<p>' +
moment(calEvent.start).format('dddd, D YYYY, hh:mma') +
'</p>' +
'<p class="color-blue-grey">Name Surname Patient<br/>Surgey ACL left knee</p>' +
'<ul class="actions">' +
'<li>More details</li>' +
'<li>Edit event</li>' +
'<li>Remove</li>' +
'</ul>' +
'</div>' +
'<div class="fc-body remove-confirm">' +
'<p>Are you sure to remove event?</p>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Yes</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">No</button>' +
'</div>' +
'</div>' +
'<div class="fc-body edit-event">' +
'<p>Edit event</p>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-calend"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<div class="input-group date datetimepicker-2">' +
'<input type="text" class="form-control" />' +
'<span class="input-group-addon"><i class="font-icon font-icon-clock"></i></span>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<textarea class="form-control" rows="2">Name Surname Patient Surgey ACL left knee</textarea>' +
'</div>' +
'<div class="text-center">' +
'<button type="button" class="btn btn-rounded btn-sm">Save</button>' +
'<button type="button" class="btn btn-rounded btn-sm btn-default remove-popover">Cancel</button>' +
'</div>' +
'</div>' +
'</div>'
);
// Datepicker init
$('.fc-popover.click .datetimepicker').datetimepicker({
widgetPositioning: {
horizontal: 'right'
}
});
$('.fc-popover.click .datetimepicker-2').datetimepicker({
widgetPositioning: {
horizontal: 'right'
},
format: 'LT',
debug: true
});
// Position popover
function posPopover(){
$('.fc-popover.click').css({
left: eventEl.offset().left + eventEl.outerWidth()/2,
top: eventEl.offset().top + eventEl.outerHeight()
});
}
posPopover();
$('.fc-scroller, .calendar-page-content, body').scroll(function(){
posPopover();
});
$(window).resize(function(){
posPopover();
});
// Remove old popover
if ($('.fc-popover.click').length > 1) {
for (var i = 0; i < ($('.fc-popover.click').length - 1); i++) {
$('.fc-popover.click').eq(i).remove();
}
}
// Close buttons
$('.fc-popover.click .cl, .fc-popover.click .remove-popover').click(function(){
$('.fc-popover.click').remove();
$('.fc-event').removeClass('event-clicked');
});
// Actions link
$('.fc-event-action-edit').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .edit-event').show();
});
$('.fc-event-action-remove').click(function(e){
e.preventDefault();
$('.fc-popover.click .main-screen').hide();
$('.fc-popover.click .remove-confirm').show();
});
}
});
/* ==========================================================================
Side datepicker
========================================================================== */
$('#side-datetimepicker').datetimepicker({
inline: true,
format: 'DD/MM/YYYY'
});
/* ========================================================================== */
});
/* ==========================================================================
Calendar page grid
========================================================================== */
(function($, viewport){
$(document).ready(function() {
if(viewport.is('>=lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight();
}
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if(viewport.is('<lg')) {
$('.calendar-page-content, .calendar-page-side').matchHeight({ remove: true });
}
})
);
});
})(jQuery, ResponsiveBootstrapToolkit);
//=========================================
The calendar is supposed to show events in the day blocks and date picker, but it is not.
Please help!

Related

datatables return [object HTMLInputElement]

I use ColumnDef to create column in datatables and it return [object HTMLInputElement] in the note texterea but the other was fine
columnDefs: [
{
title: "STT",
targets: 0,
data: null,
render: function (data, type, row, meta) {
return (meta.row + meta.settings._iDisplayStart + 1);
},
},
{
title: "Loại sản phẩm*",
targets: 1,
data: null,
render: function (data, type, row, meta) {
return '<textarea style="width: 300px;" id="productname' + data.id + '" type="text" onchange="ChangeProductName(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.productname + '">' + data.productname + '</textarea>';
}
},
{
title: "Điều kiện*",
targets: 2,
data: null,
render: function (data, type, row, meta) {
return '<textarea style="width: 300px;" id="condition' + data.id + '" type="text" onchange="ChangeCondition(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.condition + '">' + data.condition + '</textarea>';
}
},
{
title: "Rebate(%)*",
targets: 3,
data: null,
width: "70",
render: function (data, type, row, meta) {
return '<div><input id="rebate' + data.id + '" type="number" style="width: 70px;" onchange="ChangeRebate(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.rebate + '"></div>';
}
},
{
title: "Ghi chú",
targets: 4,
data: null,
/*width: "250",*/
render: function (data, type, row, meta) {
return '<textarea id="note' + data.id + '" type="text" onchange="ChangeNote(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.note + '">' + data.note + '</textarea>';
}
},
{
title: "",
targets: 5,
data: null,
className: "dt-center",
width: "70",
render: function (data, type, row, meta) {
// return ' <i style="cursor: pointer;font-size: 25px;padding-bottom: 30px;" class="fa fa-trash removePG" aria-hidden="true" onclick=removePG(\'' + data.id + '\')></i>';
return '<div class="btn btn-danger removePG" style="cursor: pointer;font-size:25px;" ><i class="fa-solid fa-trash"></i></div>';
}
},
]
Here is the display
Why only the textarea in note have this error
I appreciate every explanation and suggestion about how I should fix this

It's clearly textarea value issue. Looks like data.note is object, but it've got to be a string. Check it twice)

how can I prevent the editor event in Kendo grid?

When I click on the download link in the attached example, I want only the download event to be executed, but not the editor event.
Dojo Example: https://dojo.telerik.com/EcEDiGUB/27
HTML:
<div id="grid"></div>
JS:
var grid;
$(document).ready(function(){
grid = $("#grid").kendoGrid({
columns: [
{
field: "name",
},
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editor: function(e){
alert("open media editor");
return true;
}
}
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" },
{ id: 2, name: "John Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" +
"<div class='container'></div>" +
"<div class='file k-icon k-i-file-xls'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" }
],
schema:{
model: {
id: "id",
fields: {
file: { type: "string"}
}
}
}
},
editable: true,
}).data("grid");
$(".download").on("click", function(e){
e.preventDefault();
alert("download media");
});
It is now that the editable mode:
editable: true,
should be kept, because it is possible to edit as well as to start a download.
How can I start the download by clicking on the download icon without the editor event being fired?

you can use the columns.editable property:
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editable: function(){
return false;
},
editor: function(e){
alert("open media editor");
return true;
}
}
Dojo

Year Only in ExtJs, overriding css of extjs

I need a date picker which let me choose 'year' only in extjs.I already have multiple datepicker in my application, but for this i need to choose year only. Is there any way i can override css of datepicker(Extjs have component which shows month and year but not year only). I don't want to define custom component, i want to use datepicker by overriding it's css. I found one custom css example over stackoverflow.Please check it out here.
Ext.onReady(function() {
Ext.define('Ext.ux.OnlyYearPicker', {
xtype: 'onlyyearpicker',
extend: 'Ext.picker.Month',
afterRender: function(){
this.callParent();
this.el.setStyle({width: '106px',})
},
renderTpl: [
'<div id="{id}-bodyEl" data-ref="bodyEl" class="{baseCls}-body">',
'<div style="display: none; width:0px;" id="{id}-monthEl" data-ref="monthEl" class="{baseCls}-months">',
'<tpl for="months">',
'<div class="{parent.baseCls}-item {parent.baseCls}-month">',
'<a style="{parent.monthStyle}" role="button" hidefocus="on" class="{parent.baseCls}-item-inner">{.}</a>',
'</div>',
'</tpl>',
'</div>',
'<div id="{id}-yearEl" data-ref="yearEl" class="{baseCls}-years">',
'<div class="{baseCls}-yearnav">',
'<div class="{baseCls}-yearnav-button-ct">',
'<a id="{id}-prevEl" data-ref="prevEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-prev" hidefocus="on" role="button"></a>',
'</div>',
'<div class="{baseCls}-yearnav-button-ct">',
'<a id="{id}-nextEl" data-ref="nextEl" class="{baseCls}-yearnav-button {baseCls}-yearnav-next" hidefocus="on" role="button"></a>',
'</div>',
'</div>',
'<tpl for="years">',
'<div class="{parent.baseCls}-item {parent.baseCls}-year">',
'<a hidefocus="on" class="{parent.baseCls}-item-inner" role="button">{.}</a>',
'</div>',
'</tpl>',
'</div>',
'<div class="' + Ext.baseCSSPrefix + 'clear"></div>',
'<tpl if="showButtons">',
'<div class="{baseCls}-buttons">{%',
'var me=values.$comp, okBtn=me.okBtn, cancelBtn=me.cancelBtn;',
'okBtn.ownerLayout = cancelBtn.ownerLayout = me.componentLayout;',
'okBtn.ownerCt = cancelBtn.ownerCt = me;',
'Ext.DomHelper.generateMarkup(okBtn.getRenderTree(), out);',
'Ext.DomHelper.generateMarkup(cancelBtn.getRenderTree(), out);',
'%}</div>',
'</tpl>',
'</div>'
]
});
Ext.define('Ext.form.field.Month', {
extend: 'Ext.form.field.Date',
alias: 'widget.monthfield',
requires: ['Ext.picker.Month', 'Ext.ux.OnlyYearPicker'],
alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
selectMonth: null,
createPicker: function() {
var me = this,
format = Ext.String.format;
return Ext.create('Ext.ux.OnlyYearPicker', {
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
select: {
scope: me,
fn: me.onSelect
},
monthdblclick: {
scope: me,
fn: me.onOKClick
},
yeardblclick: {
scope: me,
fn: me.onOKClick
},
OkClick: {
scope: me,
fn: me.onOKClick
},
CancelClick: {
scope: me,
fn: me.onCancelClick
}
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
},
onCancelClick: function() {
var me = this;
me.selectMonth = null;
me.collapse();
},
onOKClick: function() {
var me = this;
if (me.selectMonth) {
me.setValue(me.selectMonth);
me.fireEvent('select', me, me.selectMonth);
}
me.collapse();
},
onSelect: function(m, d) {
var me = this;
me.selectMonth = new Date((d[0] + 1) + '/1/' + d[1]);
}
});
Ext.create('Ext.form.field.Month', {
format: 'Y',
fieldLabel: 'Date',
renderTo: Ext.getBody()
});
});

How to resize an event in full calendar without the code "editable = true"

I need to manually resize the event in fullcalendar without the code editable=true, because I have added a dropdown inside the event and
to work its click I suppose prevent the editable property(editable=false). Now the dropdown is working but the resize property been disappeared. Even I tried the property resizable(resizable=true). How can I bring both the codes?
sample code
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,agendaFourDay'
},
views: {
agendaFourDay: {
type: 'agenda',
duration: { days: 4 },
buttonText: '4 day'
},
},
defaultView: viewDefault,
//minTime: '07:00:00',
//maxTime: '21:00:00',
allDaySlot: false,
eventClick: updateEvent,
selectable: true,
selectHelper: true,
select: selectDate,
editable: false,
resizable: true,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
//events: {
// url: 'JsonResponse.ashx',
// type: 'POST',
// data: {
// eIds: $('#hdnCustomerIds').val()
// },
// error: function () {
// alert('there was an error while fetching events!');
// }
//},
defaultDate: dateDefault,
eventDrop: eventDropped,
eventResize: eventResized,
eventRender: function (event, element, view) {
debugger;
// event.stopPropagation();
$(element).find('.fc-title').prepend('' + event.customerid + ',');
$(element).find('.fc-title').html('<select class="dropdown" style="color:black";" onchange="OnchangeEventStatus(this,'+event.id+')"><option >Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi</option></select>');
$(element).find('.dropdown').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
});
$(element).find('.delete-event-link').click(function (e) {
e.stopImmediatePropagation(); //stop click event, add deleted click for anchor link
window.top.location.href = "/Sr_App/Customer_Profile.aspx?CustomerId=" + event.customerid;
});
//$(element).find('.fc-title').prepend('' + event.customerid + ',');
element.qtip({
content: {
text: qTipText(event.start, event.end, event.description),
title: '<strong>' + event.title + '</strong>'
},
position: {
my: 'bottom left',
at: 'top right'
},
style: { classes: 'qtip-shadow qtip-rounded' }
});
}
});

i got the solution, just add the property editable: false for fullCalendar
$('#calendar').fullCalendar({
selectable: true,
editable: false,
events: "JsonResponse.ashx?eids=" + eIds + "&searchText=" + searchText,
......
....
});

Extjs 4.1.1 Added new button in Datepicker, but its handler not working

I have added new close button in Ext.picker.Date, but its handler is not getting invoked. here is the jsfiddle link for my code http://jsfiddle.net/ZBKTE/1/
Some details for this code is below
line 12 - Code for adding new close button in picker's renderTpl
line 55 - Code for rendering close button in DOM
line 59 - initComponent method created instance of closeBtn.
Here is complete code as well
Ext.define('my.view.form.DatePicker', {
extend: 'Ext.picker.Date',
requires: [
'Ext.button.Button'],
alias: 'widget.my-datepicker',
msgTarget: 'none',
monthYearText: '',
ariaTitle: '',
renderTpl: [
'<div id="{id}-innerEl" role="grid">',
'<div id="{id}-buttonsEl" class="{baseCls}-close-button-parent">{%this.renderCloseBtn(values, out)%}</div>',
'<div role="presentation" class="{baseCls}-header">',
'<div class="{baseCls}-prev"><a id="{id}-prevEl" href="#" role="button" title="{prevText}"></a></div>',
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
'<div class="{baseCls}-next"><a id="{id}-nextEl" href="#" role="button" title="{nextText}"></a></div>',
'</div>',
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
'<thead role="presentation"><tr role="presentation">',
'<tpl for="dayNames">',
'<th role="columnheader" title="{.}"><span>{.:this.firstInitial}</span></th>',
'</tpl>',
'</tr></thead>',
'<tbody role="presentation"><tr role="presentation">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell" id="{[Ext.id()]}">',
'<a role="presentation" href="#" hidefocus="on" class="{parent.baseCls}-date" tabIndex="1">',
'<em role="presentation"><span role="presentation"></span></em>',
'</a>',
'</td>',
'</tpl>',
'</tr></tbody>',
'</table>',
'<tpl if="showToday">',
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
'</div>', {
firstInitial: function (value) {
return Ext.picker.Date.prototype.getDayInitial(value);
},
isEndOfWeek: function (value) {
// convert from 1 based index to 0 based
// by decrementing value once.
value--;
var end = value % 7 === 0 && value !== 0;
return end ? '</tr><tr role="row">' : '';
},
renderTodayBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
},
renderMonthBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
},
renderCloseBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.closeBtn.getRenderTree(), out);
}
}],
initComponent: function () {
var me = this;
me.closeBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: 'C',
handler: function () {
debug.console('need code for close click');
me.hide();
},
scope: me
});
me.callParent(arguments);
},
beforeRender: function () {
var me = this;
me.callParent(arguments);
//me.monthBtn.removeListener('click', me.showMonthPicker);
me.monthBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: '',
tooltip: me.monthYearText //,
});
},
/**
* Show the previous month.
* #param {Object} e
* #return {Ext.picker.Date} this
*/
showPrevMonth: function (e) {
if (Ext.Date.getFirstDateOfMonth(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1)) >= Ext.Date.getFirstDateOfMonth(this.minDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
}
},
/**
* Show the next month.
* #param {Object} e
* #return {Ext.picker.Date} this
*/
showNextMonth: function (e) {
if ((Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1) <= this.maxDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
}
},
/**
* Respond to a date being clicked in the picker
* #private
* #param {Ext.EventObject} e
* #param {HTMLElement} t
*/
handleDateClick: function (e, t) {
var me = this;
if (Ext.fly(t.parentNode).hasCls(me.prevCls) || Ext.fly(t.parentNode).hasCls(me.nextCls)) {
e.stopEvent();
} else {
me.callParent(arguments);
}
}
});
Ext.define('my.view.form.ifsdatefield', {
extend: 'Ext.form.field.Date',
alias: 'widget.my-datefield',
msgTarget: 'none',
preventMark: true,
cls: 'ifs-datefield',
initComponent: function () {
var me = this;
me.callParent(arguments);
},
createPicker: function () {
var me = this,
format = Ext.String.format;
return new my.view.form.DatePicker({
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
cls: me.cls,
ariaTitle: 'test',
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
msgTarget: 'none',
width: 220,
height: 265,
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function () {
me.collapse();
}
}
});
}
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'my-datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
minValue: Ext.Date.add(new Date(), Ext.Date.YEAR, -5),
maxValue: Ext.Date.add(new Date(), Ext.Date.YEAR, 1),
value: Ext.Date.clearTime(new Date(), false),
editable: false
}]
});

Eh eh, clever try. You've just missed the finishRenderChildren.

Categories

Resources