I am having some problems retrieving these from my string
here is my script, taken from the website..
events: {
url: '/CalendarManager/Findall',
method: 'GET',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
},
failure: function () {
alert('there was an error while fetching events!');
},
eventRender: function (event, element) {
element.qtip({
content: event.custom_param1,
content: event.custom_param2
});
}
},
UPDATE: 12/24/2020
To answer questions below.. I am using 5.3.2 version. I can use this as well and it will bring back everything but the custom parameters.
events: '/CalendarManager/Findall',
I am using Json pulling from DB - Below is the code..
public ActionResult FindAll()
{
return Json(db.GetEvents.AsEnumerable().Select(e => new
{
id = e.CompanyId,
companyName = e.CompanyName,
title = e.Title,
description = e.Description,
allDay = e.AllDay,
start = e.StartDate.ToString("yyyy-MM-ddTHH:mm:ss"),
end = e.EndDate.ToString("yyyy-MM-ddTHH:mm:ss"),
color = e.Color
}).ToList(), JsonRequestBehavior.AllowGet);
}
I changed the version I was using and that is when the extras did not show up. So I added what I thought the documentation said to use.
Adding the extra Params after the url did not work..
UPDATE:
I read through the suggested. I guess I am still not understanding or maybe not getting "Where I am supposed to put the code".
I believe I need to use eventContent. I also did use the console.log(info.event.extendedProps.companyName); Which is great, it does show up in the console window, However i need it on the calendar not in the console window. FullCalendar's examples could be a little better!
Here is what I did but still does not show on the calendar.
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
eventSources: [{
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
}],
eventContent: function (arg) {
html: arg.event.extendedProps.companyName
}
I did add some stuff in there to produce just a bubble when hovered over with this info but it does not work either.
Thank You!
UPDATE: 12/27/2020 Working Code
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,dayGridWeek,dayGridDay,listWeek'
},
initialView: 'dayGridMonth',
navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
themeSystem: 'bootstrap',
selectable: true,
selectMirror: true,
//Random default events
//events: '/CalendarManager/Findall',
eventDidMount: function (info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
console.log(info.event.extendedProps.companyName);
},
events: {
url: '/CalendarManager/Findall',
failure: function () {
alert('there was an error while fetching events!');
},
},
eventContent: function (arg) {
return { html: arg.event.title + '<br>' + arg.event.extendedProps.companyName + '<br>' + arg.event.extendedProps.description };
}
});
calendar.render();
Thank you for all your help!
First, let me know what kind of version of fullcalendar you are using.
fullcalendar v5.5 doesn't provide eventRender.
And extraParams is not what you want to show. It is the query params which attach after the request url, like http://example.com/CalendarManager/Findall?custom_param1=customerName&....
If you want to use extend event props then you should parse them as extendProps.
And you should use Event Render Hooks rather than eventRender if you are using the latest version.
How to fix:
Anyway, you should use function, not an object.
You can use events (as a function)
function( fetchInfo, successCallback, failureCallback ) { }
You can also use events (as a json feed)
var calendar = new Calendar(calendarEl, {
events: '/myfeed.php'
});
If you are going to use object rather than function, then you can use eventSources
And if you want to handle the success response, then use eventSourceSuccess function
Here is an example (using fullcalendar v5.5):
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'listWeek',
loading: function(bool) {
if (bool) {
$("#dashboard-calendar-column .pre-loader").show();
} else {
$("#dashboard-calendar-column .pre-loader").hide();
}
},
// get all events from the source
eventSources: [{
url: '/CalendarManager/Findall',
method: 'GET',
failure: function() {
document.getElementById('script-warning').style.display = 'block'
}
}],
// convert the response to the fullcalendar events
eventSourceSuccess: function(content, xhr) {
var events = [];
content.events.value.map(event => {
events.push({
id: event.id,
allDay: event.isAllDay,
title: event.subject,
start:event.start.dateTime,
end: event.end.dateTime,
// The followings are what you want to add as extended
custom_param1: 'customerName',
custom_param2: 'description',
// Or you could add them to the extendedProps object
extendedProps: {
custom_param1: 'customerName',
custom_param2: 'description',
description: event.bodyPreview,
...
},
// You can check fullcalendar event parsing
...
})
})
return events;
},
eventDidMount: function (arg) {
// remove dot between the event titles
$(arg.el).find('.fc-list-event-graphic').remove();
// You can select the extended props like arg.event.custom_param1 or arg.event.extendProps.custom_param1
...
},
});
calendar.render();
})
Hope this would help you.
You can use extraParams using eventSources if you are using fullcalendar v5.
eventSources: [{
url: '/CalendarManager/Findall',
method: 'POST',
extraParams: {
custom_param1: 'customerName',
custom_param2: 'description'
}
...
}]
You should use POST rather use GET, then it will work.
I have SPA multi view application in AngularJS, I have defined $interval which is started from another view Controller. When i click a btn with function called and line $interval.cancel(); in it, it does not stop.
Here are examples of my code:
MainController:
$scope.$on("startInterval", function () {
$interval(function warningsControl() {
console.log("Timer stamp!");
$.ajax({
// some web api call which works fine
})
}, 10000);
});
$scope.stop = function () {
$interval.cancel();
}
$scope.logoutButton = {
text: "Logout",
type: "normal",
visible: false,
onClick: function () {
// some working code
$scope.stop();
var logoutBtn = $("#logout-btn").dxButton("instance");
logoutBtn.option({
visible: false
});
}
}
And SecondController:
$scope.authenticateButton = {
type: "default",
text: "Log In",
onClick: function () {
$.ajax({
// some web api calling
success: (data) => {
// some working code
$rootScope.$broadcast("startInterval");
}
})
}
}
This code start interval and everithing is running OK, until the point i click Logout btn - it made everithing except stoping the interval.
Any ideas how to fix it? I would be grateful for advice.
The $interval function should return some sort of ID which you can pass into $interval.cancel(). For example:
var int_id = $interval( func, time )
//...later...
$interval.cancel(int_id)
I'm trying to utilise the jquery.confirm script. It's all firing as expected but I'm trying to use custom data attributes that are passed into a controller elsewhere on the site, but I'm getting the error of undefined.
<a class="confirmMemberDelete" data-title="Mr Goose" data-user="CON-000132456" data-username="Mr Goose" href="#">
$(".confirmMemberDelete").confirm({
text: "Are you sure that you wish to delete this user?",
confirm: function (button) {
var conNum = $(this).attr('data-user');
var conName = $(this).attr('data-username');
alert("You just confirmed.");
alert($(this).attr('data-user'));
},
cancel: function (button) {
alert("You aborted the operation.");
},
confirmButton: "Yes I am",
cancelButton: "No"
});
The two custom data attributes are data-user and data-username. data-title is used by the confirm script as a title for the confirmation box.
I can't find any documentation online so any help would be marvellous.
Still not fixed in version 3.3.4, but I'm able to extract the data attributes the following way.
<a class="confirmMemberDelete" data-title="Mr Goose" data-user="CON-000132456" data-username="Mr Goose" href="#">
$('.confirmMemberDelete').confirm({
title: 'Make this my profile picture',
buttons: {
ok: function () {
let user = $(this)[0].$target[0].dataset.user;
let username = $(this)[0].$target[0].dataset.username;
console.log(user, username);
},
cancel: function () {
}
}
});
Check out this fiddle
I have an hyperlink in asp.net web forms. When I click this link I want to show an asp.net mvc view as a popup modal. Currently I am doing Response.Redirect in the server side of the aspx page to the controller and then using Keno UI's kendowWindow on the top most div of the view. The problem is that because of response.redirect it goes to a different URL. I want the popup to show the modal page on the page containing the hyper link itself and close when the close button is clicked. I believe this has to be done by using client side javascript to load the modal instead of Response.Redirect.
$("#MyTopDiv").kendoWindow({
content: {
url: "~/MyFolder/MyView"
},
activate: function () {
$(".k-i-close").on("click", function () {
window.location = document.location.origin + "/Original/user/Original.aspx";
})
},
modal: true,
width: "950px",
title: "Select Documents",
close: onClose,
});
I believe I have done something similar to this, if I am understanding your question.
ASPX Page
<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>
JavaScript
$(function () {
$('body').on('click', '.open-modal', function (e) {
e.preventDefault();
$.post(this.href, function (html) {
$('<div />').kendoWindow({
visible: true,
title: 'My Modal',
modal: true,
width: '600px',
deactivate: function () {
this.element.closest('.k-widget').remove();
}
}).data('kendoWindow')
.content(html)
.center()
.open();
});
})
});
MVC Controller Action
[HttpPost]
public PartialViewResult MyView()
{
var vm = new MyViewVM();
return PartialView("_MyView", vm);
}
Is that helpful at all?
UPDATE
Yea you can pass parameters. Just include them as querystring values on your <a> and add them to the controller action.
<a class="open-modal" href="/MyFolder/MyView?id=9&name=Test">Open Modal</a>
then ...
[HttpPost]
public PartialViewResult MyView(int id, string name)
{
var vm = new MyViewVM();
//get data and fill view modal with id
return PartialView("_MyView", vm);
}
That should work just make sure your parameter names match
UPDATE 2
Ya if you wanted to add your parameters dynamically using the javascript you linked in the comments you could probably do this:
ASPX Page
<a class="open-modal" href="/MyFolder/MyView">Open Modal</a>
Javascript
$(function () {
$('body').on('click', '.open-modal', function (e) {
e.preventDefault();
var id = getParameterByName('id');
var name = 'Test';
$.post(this.href, { id: id, name: name }, function (html) {
$('<div />').kendoWindow({
visible: true,
title: 'My Modal',
modal: true,
width: '600px',
deactivate: function () {
this.element.closest('.k-widget').remove();
}
}).data('kendoWindow')
.content(html)
.center()
.open();
});
})
});
The getParameterByName is defined in the link you posted in the comments and you controller action shouldn't need to change from the first UPDATE I posted.
I am using bootbox dialogs for confirming before deleting records.
here is my jQuery script for confirmation before deleting record.
<a class="btn btn-xs btn-danger" id="deleteContent" title="Delete">delete</a>
$('#deletec').click(function (e) {
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
}
}
}
});
});
it is showing correct dialog but the record being deleted without taking confirmation, can anyone please tell me how can i prevent deletion of record without confirmation ? Thanks in advance.
You can not do what you want because the modal dialog that you are using has no way of pausing the click action. You would need to have to cancel the click action and than make that call.
One way is just to unbind click and call it again
$('#deleteContent').on("click", function (e) {
e.preventDefault();
bootbox.dialog({
message: "you data is save",
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-success",
callback: function () {
Example.show("great you save it");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function () {
Example.show("record deleted!");
$('#deleteContent').off("click")[0].click();
}
}
}
});
});
As I said in my comments above, making a delete request with a get is a BAD idea. If a user has a plugin that prefetches pages, say goodbye to all your data in the database.
What happens in the code
e.preventDefault(); Cancels the click event so it will not go to the server
$('#deleteContent').off("click") //removes the click event so it will not be called again
[0].click() //selects the DOM element and calls the click event to trigger the navigation