I want to set authorities on my calendar. Only certain users can update the data. While all users can only see the event and are not allowed to make any changes. I'm using select function to popup modals. Can fullcalendar be disabled? I want it to be like readonly function. Which means all users can read the data. I try to do like this :
if(#ViewBag.User == "Admin")
{
editable = true,
}
But it doesn't work. The events can still be edited since I also set that attribute inside my JSON codes for events. Is there any way to solve this? Thanks
Try this,
editable = false
and set URL for the event as
url: '/Event/Create/'
if you do not want any redirection to add use below link
url: 'Javascript:'
User this URL in events section. like this
$('#calendar').fullCalendar({
editable = false,
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-01',
url: 'Javascript:'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});
Related
I'm not sure if what I'm trying to do is the correct/valid approach to what I'm trying to accomplish; essentially, I'm retrieving data from a db via an ajax call, I want this data to populate a js library where the layout is something like
data[
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
},
]
is there any way I can populate the code inside 'data' on the fly?
I was thinking with a loop to populate a variable which would hold the data and placing it like so
//this is hard coded, but the idea is that a loop would populate this with the necessary information
let items = "
item{
name: 'name',
start_date: date,
end_date: date
},
item{
name: 'name',
start_date: date,
end_date: date
}";
data[
items
]
Would this be a valid approach?
thanks in advance!
UPDATE:
For clarification, this what I have
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}
]
});
What im trying to achieve is something like this
let allEvents = "
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
},
{
title: 'Some event',
start: '2022-08-31',
end: '2022-08-31'
}";
$('#calendar').fullCalendar({
defaultDate: today,
eventLimit: true,
events: [
allEvents;
]
});
Would this be possible?
So, closing this question, thanks to #DaveNewton for the insight, it really clarified what I was supposed to do; I apologize for the confusion, my thought process essentially revolved around 'echoing' or 'printing' code in php.
my approach was:
$.ajax({
type: "GET",
url: filethathandlesrequest.php,
data: {
data_to_be_sent: 'data',
},
success: function(response) {
response = JSON.parse(response);
eventsGotten = response.return_result;
//this is where I create the object
let eventsToDisplay = [];
for (let index = 0; index < eventsGotten.length; index++) {
const element = eventsGotten[index];
let singleEvent = {title: element.description, start: element.start_date, end: element.end_date};
eventsToDisplay.push(singleEvent);
}
if (response.return_code === 0) {
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function() {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: eventsToDisplay // <-- this is where I use it; and it works!
});
});
}
} else { //you can ignore this, this is just to not display anything if my ajax request fails
if ($('#calendar').exists()) {
loadScript(plugin_path + 'fullcalendar/fullcalendar.min.js', function () {
$('#calendar').fullCalendar({
defaultDate: today,
//editable: true,
eventLimit: true,
events: []
});
});
}
}
});
It seems you are asking if you can import data from a database and populate a JSON array in Javascript with it. The answer would be yes. In fact, I do this routinely to create Javascript front ends that can be quickly rendered and only talk to the database when necessary so you're not waiting on it. You can use Jquery ajax calls to retrieve and write data. I like to have local variables with JSON formatted data which I use to run the app. The app can quickly read and write changes to these JSON arrays. Keep in mind if the page is reloaded or fails all the data to that point will be lost and the user will have to start over so you need to store data to the database at strategic intervals. You can also use HTML localStorage to store data in the browser itself. I've found this an efficient way to build single-page Javascript apps without resorting to React or some of the other frameworks. It's not as efficient though, but easier to code and maintain.
The approach I would take is to define a particular DOM element as a parent / container for the DOM elements which will represent each item. Iterate over the items array in your ajax response, and create DOM elements with jquery for each item. Something along the lines of $('<div>${currentItem.name}>/div>').appendTo(containerDiv);
I'm using Fullcalendar v4 like this. Events are loaded correctly, but when I manually add a new one (it is also saved to SQL database via ajax call), then I change month and return back, this event is rendered twice. I'm not sure what cause this, because when I change months again, event is still doubled only, not trippled.
I've tried set lazyLoading or cache to false and also, for example, remove all events before rendering with $('.fc-event').remove(); but it did not help.
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
defaultView: 'resourceTimeline30',
views: {
resourceTimeline30: {
type: 'resourceTimeline',
duration: { days: 30 }
}
},
editable: false,
selectable: true,
resources: [ ... ],
events: 'https://www.example.com/?fullcalendar=load',
/*
// did not help
lazyLoading: true,
events: {
url: 'https://www.example.com/?fullcalendar=load',
cache: false,
extraParams: function() {
return {
cachebuster: new Date().valueOf()
};
}
}
*/
});
calendar.render();
So, if anybody needs it, according comments above, the working solution is:
Replace:
events: 'https://www.example.com/?fullcalendar=load',
With
eventSources: [{
'id': 1,
'url': 'https://www.example.com/?fullcalendar=load'
}],
And use that ID as second parameter in addEvent()
calendar.addEvent(event, 1);
My question is the following:
I have multiple filters on my page, that filter events schedule dynamically, so when I click on any of the filters, my url changes without reloading the page.
For example:
http://.../schedule/#Screening,Free
http://.../schedule/#Talk,Expo
Then, I have share buttons with Sharrre:
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank")
a.icon.icon-linkedin2.js-linkedin-filters(href="#", target="_blank")
a.icon.icon-facebook.js-facebook-filters(href="#", target="_blank")
$('.js-facebook-filters').sharrre({
share: {
facebook: true,
},
url: window.location.href,
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('facebook');
}
});
Inspite of that fact that inside sharrre I have url variable that equals to current link, it shares only that link which is derived when page is loaded for the first time.
I tried to put it inside click event on the icons - that does not work.
I tried to put sharrre inside a function (eg. initialiseShare) and do window.initialiseShare = initialiseShare; - that also does not work.
And I tried to remove and append the button, changing data-url attribute, and it also does not work.
function initialiseShare(link) {
$('.js-twitter-filters').sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
} }); }
+
$(document).ready(function() {
initialiseShare();
$('.js-twitter-filters').on('click', function(){
var clone = $('.js-twitter-filters').clone();
$('.js-twitter-filters').remove();
$('.social--share-filters').append(clone);
$('.js-twitter-filters').data('url', window.location.href);
initialiseShare();
return false;
});
});
+
jade for the icon
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank" data-url="#")
Please, help!
Thank you in advance!
P.S. I can use any other solution except those which could lead to buttons which cannot be customised in design.
Try this:
$('body').on('DOMNodeInserted', '.js-twitter-filters', function(e) {
$(this).sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
}
});
});
Explanation:
You're trying to bind to dynamically loaded elements. When your script executes on page load, the elements are not available for jQuery to perform the binding with "sharrre" - so you can use the .on() live binding delegate to bind to elements after insertion.
Reference:
http://api.jquery.com/on/
I am using jquery calendar to show some information.So on click of the events in the date i am am getting the delete pop up i wan to do a delete using that .How i can do it?? This is my calerdar code which i am using here
$("#calendar").fullCalendar('renderEvent',
{
events:[
{
title: val.title,
start: val.start,
end: val.end,
}
],
The title is showing the event name and on click of that event i am geting delete pop up ,how i will use that to delete that event?? Please help
http://fullcalendar.io/docs/mouse/eventClick/
$('#calendar').fullCalendar({
eventClick: function(calEvent, jsEvent, view) {
// make a call to your server telling it to delete the event.
var promise = $.ajax({
type: 'DELETE',
url: 'yourendpoint/' + calEvent.title
});
promise.then(function () {/* delete event from calendar */})
}
});
I am using fullcalendar(v2.0.0) in my application. All events displaying from DB and user can drag and drop and updates events. Everything working fine except that dropped event again goes to old date when click on fullcalendar's next/prev button.
check my fiddle http://jsfiddle.net/Manivasagam/3E8nk/1021/
$('#calendar').fullCalendar({
events:"/FullcalendarProject/FullCalendarChecking"
// my events will be like this from DB [{title: 'Plants',start: '2015-05-18'}, {title: 'Animals',start: '2015-05-23'}]
});
The exact problem is if i drag and dropped Plants event to 2015-05-20 then it moved to 2015-05-20 but if i click next/prev then again that moved event go back to 2015-05-18.
Why this happen? How to fix this?
you need to write your calendar's drop event callback in which you will send the new date to server and server will update the date of event in db so next time it will come with updated date as follow
$('#calendar').fullCalendar({
events:"/FullcalendarProject/FullCalendarChecking" ,
// my events will be like this from DB [{title: 'Plants',start: '2015-05-18'}, {title: 'Animals',start: '2015-05-23'}]
eventDrop: function (event, delta, minuteDelta, allDay, revertFunc) {
console.log(event);
//asking for confirmation from user using $.prompt you can skip and send direct ajax
$.prompt("Are you sure you want to move the events "+delta+" days?", {
title: "Are you Sure?",
buttons: { "Yes": true, "No": false },
submit: function (e, v, m, f) {
// use e.preventDefault() to prevent closing when needed or return false.
// e.preventDefault();
if (v)
{
$.ajax({
url: "/modules/crm_events/support/changeEventDate.php",
data: { id: event.id, changeDays: delta , table:event.className[2] , part:event.part },
type: "GET",
dataType: "json",
}).done(function (data) {
});
}
else
{
revertFunc();
}
}
});
},
});