I have a hard time to understand how the full calendar plug in works if you want to add a new event.
Every example i have seen is hard coded events, not from textboxes.
I have a custom list where i can add new courses (making a course catalog), what i want with my calendar is that the events that is in the custom list will be showing in the calendar to, after the right date (from a textbox).
Does anyone know how to connect a custom list to a fullcalendar? So when a new event is added in the custom list, it also will be added into the full calendar!
will be really glad if someone could give me an example.
Doing it with javascript!
var createinfo = SP.ListCreationInformation();
var newtask = list.addItem(createinfo);
newtask.set_item('Kursnamn', $('#TextKursnamn').val());
newtask.set_item('Malgrupp', $('#TextMalgrupp').val());
newtask.set_item('Forkunskapskrav', $('#TextForkunskapskrav').val());
newtask.set_item('Matrielkrav', $('#TextMatriellkrav').val());
newtask.set_item('Omfattning', $('#SelectOmfattning').val());
newtask.set_item('Kursledare', $('#TextKursledare').val());
newtask.set_item('Telefonnr', $('#TextTelefonnummer').val());
newtask.set_item('Email', $('#TextEmail').val());
newtask.set_item('Startdatum', $('#TextStartdatum').val());
newtask.set_item('Slutdatum', $('#TextSlutdatum').val());
newtask.set_item('SistaAnmalninsgdag', $('#TextSistaanmalningsdag').val());
newtask.set_item('Fritext', $('#TextInformation').val());
newtask.update();
clientContext.load(newtask);
clientContext.executeQueryAsync(success_Createlist, onFail);
//And the calendar is just empty right now
$('#calendar').fullCalendar({
});
Related
I have an application linked with my autodesk account and I also have a panel dashboard that load the data from the current model, the issue is that this panel isnt update when I choose another model into the hub.
Im trying to find the Autodesk.viewing.EVENT that can record this step but I couldnt. All of them have been tryed and whitout success...
Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT,
Autodesk.Viewing.MODEL_ADDED_EVENT...
I have got this working. Don't worry about events, it's working fine.
Here are my changes and additions:
PanelBarChart.js(same goes in piechart as well)
loadWithCustomProperty(property) {
this.propertyToUse = property;
this.chart.destroy();
this.drawChart();
}
After creating list in dashboard.js, add the change event:
$('#'+_this._selectcontainer).change(function() {
console.log($('#'+_this._selectcontainer+' option:selected').text())
_this._panel.loadWithCustomProperty($('#'+_this._selectcontainer+' option:selected').text())
});
Here _this._selectcontainer is UUID, because you're adding multiple chards, so id needs to be unique.
I already have start and end time for an external event but is there any correct way to set the end time on highlight (gray background) of the same external event.
Or if there is no way to set the end time on highlight then can we remove the fc-highlight completely from external/draggable events.
By the way, I already asked this question but didn't get correct response, so that's why I'm asking again
For more detail, please visit my another question here: Disable highlight of an external event in fullcalendar
Starting from your CodePen...
I managed to customise the draggable event in order to have a defined duration to be used as time calculation.
I added data-duration-hour and data-duration-minute attributes to the draggable event.
Those "data" attributes ares used to determine the ending time of the event, on drop.
NOW about the hightlight which occurs on drag (before drop) in the calendar...
It still hightlights 2 hours.
You'll have to to look at a function to add on drag in fullCalendar options.
I have no idea for the moment.
So... I may not have answered the right question (about the hightlight effect on drag).
But this is still an improvement for your project.
See in this CodePen
HTML modified:
<div class='fc-event' data-duration-hour="3" data-duration-minute="30">My Event 1</div>
JS modified:
function external_event_dropped(date, external_event) {
var event_object;
var copied_event_object;
var tempDate = new Date(date);
event_object = $(external_event).data('eventObject');
copied_event_object = $.extend({}, event_object);
copied_event_object.start = date;
// This is the dropped date object
console.log(date);
// This is the drop time in clear.
console.log( "dropped at: "+date.hour()+":"+date.minute() );
// Retreive the data-duration from the dragged element.
var durationHour = parseInt(external_event.data("duration-hour"));
var durationMinute = parseInt(external_event.data("duration-minute"));
console.log("DATA: "+durationHour+":"+durationMinute);
// Clone the time object to modify it in order to create de end time.
var dateEnd = date.clone();
dateEnd = dateEnd.hour(dateEnd.hour()+durationHour);
dateEnd = dateEnd.minute(dateEnd.minute()+durationMinute);
// This is the end time object.
console.log(dateEnd);
// This is the drop end time in clear.
console.log( "dropped at: "+dateEnd.hour()+":"+dateEnd.minute() );
// Now set it to the FullCalendar object.
copied_event_object.end = dateEnd;
copied_event_object.allDay = false;
copied_event_object.title = 'ADEEL';
external_event.remove();
$('#exampleCalendar').fullCalendar('renderEvent', copied_event_object, true);
}
For the complete solution check this out: Fullcalendar
External/Draggable Events Highlight
Effect
Well after reading the fullcalendar documentation and spent a lot of time on this issue, I come up with a solution and I hope it might help others as well.
So, the solution is:
I've added an option defaultTimedEventDuration which is a default duration of an external/draggable event, if there is no duration set on event.
e.g: defaultTimedEventDuration: '01:00:00'
Also added data-duration in html to get dynamic duration and highlighted effect.
e.g: <div class='fc-event' data-duration='03:00'>My Event 1</div>
N.B: Also possibility to set duration attribute in js data
Breaking my head over this and I need a little assistance.
Background Story
I'm creating a calendar selection tool to highlight free days as background events with fullCalendar. The UI allows a draggable selection of days or highlight a single day. When the user selects the highlight again, it should be removed. With AJAX I can add or remove the selections and when you refresh the page, the previous events are loaded from data-events on the container.
<div class="container" data-class="calendar" data-events='<?=$jsoncalendarinfo?>' data-user-id="<?php echo $id; ?>">
<div class="row">
<div class="col-lg-3 feedback p-y-2">
<?php
foreach ($calendarinfo as $item) {
?>
<ul data-start="<?=strtotime($item->date_from)?>">
<li>Vrij</li>
<li><?=date('d/m/Y',strtotime($item->date_from))?> - <?=date('d/m/Y',strtotime($item->date_to))?></li>
</ul>
<?php
}
?>
</div>
<div class="col-lg-9 calendar p-y-2"><!-- fullcalendar.js rendering --></div>
</div>
</div>
Problem
When I refresh the page and I click a single highlight (day or range), all highlights are removed. Now I must add I might be confused between events, eventSource and eventSources. The documentation isn't very explicit on the idea behind it so it's more like a trial and error for me.
My Code
eventSources: [this.formatEvents(this.events)],
selectOverlap: function (event) {
self.calendar.fullCalendar(events.removeEventSource, event.source);
self.removeFeedback(event);
return !event.block;
},
I've probably hijacked this functionality to get what I wanted but again, I can't seem to find a proper method to unselect a highlighted day or range. And it's not the unselect method.
Their code
There is no instance available in selectOverlap => self.calendar.fullCalendar
The doc states you can remove eventSources but not events ???
I've tried to add my jsondata in events and in eventSources => what's the f*** difference?
I've tried to remove by event.id and event.source => they all vannish !?!
I've tried to cleanup the event object but in event.sources.events all events are generically deeply nested.
I dove into the library to see what's going on => ln. 11161
function removeEventSource(matchInput) {
removeSpecificEventSources(
getEventSourcesByMatch(matchInput)
);
}
// if called with no arguments, removes all.
function removeEventSources(matchInputs) {
if (matchInputs == null) {
removeSpecificEventSources(sources, true); // isAll=true
}
else {
removeSpecificEventSources(
getEventSourcesByMatchArray(matchInputs)
);
}
}
It basically never compares since the objects are too different. If I use my event.id it tries to compare against an event object. When I use event.source it finds all events under the same source and BAM, all gone :s
Anyone here to cheer me up?
DEMO
https://jsfiddle.net/tive/vxrkmmn3/
Simply click the highlighted dates. These are 2 ranges and should only remove one range. Unfortunately it removes all.
If you highlight another day or range, you can remove it without a problem. Once the page is refreshed, it doesn't work anymore.
Event sources are just ways of grouping events, useful if your events come from different sources (backends). If you don't have multiple backends, or other logical grouping of events, you probably don't need them.
So if you remove an event source, you'll remove all the events that came from that source.
If you are trying to remove a single event when you select it, then the RemoveEvents method is the one you need.
The signature is:
.fullCalendar( 'removeEvents' [, idOrFilter ] )
where idOrFilter is either an eventID (which you can get from the event object provided by the selectOverlap method), or a function which looks at an event and decides if it should be removed or not.
Full docs at https://fullcalendar.io/docs/event_data/removeEvents
I am creating the calendar where I can drop events from external list.
I took as example this sample - external-dragging.
I want to add specific logic that user can add only one event per day.
So for preventing dropping to 'filled' cell I am trying to use dropAccept method in the next way.
dropAccept: function (item) {
return [my condition];
},
I can get item that I am dropping from item element, I can get calendar's events but I can't get a cell (or a date) where I am putting my item.
How could I get a cell/date where I am dropping item?
Thank you.
I have solved this in another way.
I set all events as all day by default
I forbade an event overlapping
My code is:
$('#calendar').fullCalendar({
allDayDefault: true,
eventOverlap: false,
});
You can use drop function of full calendar.
Here is parameters
function( date, jsEvent, ui ) { }
Enjoy!
I have this fiddle, it's pretty cool, my first attempt at creating a jquery control. It is simple, just a star ratings control.
I want to be able to turn this into a control, so that, I can call:
$('#someDiv').starRating();
And it turns that div into a star rating.
I would like to be able to then setup some properties:
Empty Star Source
Hover Star Source
Star Rating (leave blank if new rating)
So it would look something like this:
$('#someDiv').starRating({
emptyStarSource : 'http://www.imageland.com/image.png',
hoverStarSource : 'http://www.imageland.com/image.png',
initialRating : 3
});
Similar to the Datepicker in how to change options etc.
If anyone could point me in the right direction that would be awesome!
EDIT
So I have had a go with the help of the answer I got. The img click events aren't working, I'm guessing that somehow I have to attach the click handlers after I append them to the page. how? After that, I just need to do the settings!
ratings control
To write a plugin in jQuery use the following syntax
$.fn.setRed = function(){
return $(this).each(function(){ //this is required for jQuery chaining to work and also if multiple html objects are passed
var _obj = $(this);
//work on the object here
_obj.css("background-color", "red");
});
}
You can then use
$(".ratings").setRed();