I'm new to FullCalendar.
In my project, I need to show Calendar with time range and allocated participants for each training center for each day.
To be more precise, a day can have many training slot that will be conducted by training center.
So, I would like to show which training center is allocated to which time ranges and the number of available slot.
Recently, I saw FullCalendar control can show time and events.
For my case, I want to add links(one will go to editing of training slot and another link will go to editing of training participants.)
How can i done this?
with thanks,
Thura
You can add buttons to the calendar; look at this utoob flick
http://www.youtube.com/watch?v=UKUu9KJxunI
That was my calendar and the code and explanation is found here
JQuery full calendar, how to change view
You will have to insert buttons manually- There is no way of doing it out of the box with fullcalnedar.
eventRender: function (event, element) {
//element.find('.fc-event-inner').append("<p>" + event.description + "</p>");
if (event.innerHtml != null)
element.find('.fc-event-inner').append(event.innerHtml);
}
and send the innerHtml inside the event object.
Related
I want to find a way to remove some days from the timeline view of full calendar because they are company holidays. like removing the 4th of July, memorial day etc. how do I do this?
It's not possible to entirely remove them from the display via the API unfortunately, but you can easily mark them as unavailable or whatever - perhaps by using a feed of Background Events, with one event for each holiday. You can maybe generate them from your server, or there are public calendars online containing the official holidays of different countries, which you might be able to use as the source.
A background event is the same as a regular event, except its display mode is changed - for example:
{
start: '2022-06-01T10:00:00',
end: '2022-06-01T16:00:00',
display: 'background'
}
If you additionally want to stop people creating events on those dates, or dragging events onto those dates, that can be controlled through the appropriate options / callbacks - there are examples in the fullCalendar documentation, such as this one which will prevent a user creating a new event on top of a background event:
selectOverlap: function(event) {
return event.rendering === 'background';
}
References:
https://fullcalendar.io/docs/background-events
https://fullcalendar.io/docs/selectOverlap
https://fullcalendar.io/docs/eventOverlap
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
I have event populating my full calendar and I'd like to add an icon to some of the events that meet a certain criteria. For example, my calendar events are representations of work orders that will be added to routes. So if a work order is in a route, I'd like the event that represents that work order to have an icon in the title that signifies that it is part of a route.
I could just change the event's color, but I'd like more than just color. Am I asking too much? Is this possible?
eventRender: function(event, element, calEvent) {
element.find(".fc-event-title").after($("<span class=\"fc-event-icons\"></span>").html("<img src=\"images/on1.jpg\" />"));
}
Sure you can. In eventRender you can look for and manipulate .fc-event-title (mind that some "short" events may not have this markup), or just add a class with an image background, or add a dingbat (bullet here), like:
.fcimg .fc-event-title:before {content: "\025cf\00020";}
You may also do a little modification in the plugin that is in DayEventRenderer.js file goto "daySegHTML" function and in that right after the condition if (!event.allDay && seg.isStart) (that is the start of the making of event div itslef) insert the following statement:
if (event.imgSource != '')
html += "<div><img src='" + event.imgSource + "' style='display:inline;width:2.0em;height:2.0em;margin-bottom:0.5em'></div>";
Note that event.imgSource is not the builtin event property but you have to provide it while providing the event data.
So if you dont provide event.imgSource nothing will get included and if you provide the image source it will automatically add it.
Hope this will resolve the issue :)
On the month view, is there a way to display an image along with the event "title"? (The events would be categorized and there would be a separate image for each category. )
On the week/day views, can an image be displayed along with other information?
I've read through the documentation and dozens and dozens of the questions here (and learned a lot from the answers), but didn't see this addressed. (A background image for the event won't work for this.) If I replace the title text with the img tag, the tag itself is displayed rather than rendering the image.
I'm a rookie at this (jQuery, etc.), so sorry if this is a silly question. I'm off to read the documentation again.
Simply add another name value pair to the data-in. In this case, I have added ...imageurl:value...
[{title:'Language - Session Title',dow:[1,2,4], start:'10:30:00', end: '11:00:00'},
{imageurl:'images/flag/flag_india.png', title: 'Meeting',start:'2017-04-25T10:30:00'}];
$('#calendar').fullCalendar({
......
eventRender: function(event, eventElement, view) {
if (event.imageurl) {eventElement.find(".fc-title").prepend("<img src='" + event.imageurl +"'> ");}}
......
}
I have to add a progress bar on my web page to show the progress of submission. My page on submit saves the data in the database. I have to show user how long will the submission take place. For an e.g., 50% Completed and so on..
in order to show a progress for the update process, you will need to send partial updates indicating the total percentage completed so far.
so the more applicable solution will be to use something like jQuery UI ProgressBar, and have a mechanism to send the mentioned percent to the user, then update the progress bar with the last sent value.
you can check the following articles for more details:
Using the jQuery ProgressBar Widget in ASP.NET Applications
Reporting server side operation progress with jQuery UI Progressbar
I see two ways in here, first, when you are going to do it asynchonous request, you can measure how long this takes in an average (10secs) and use this value for measure how far are we now.
Second way is more suitable for huge data uploads .. You would need the database and application support and upload the data using batches. Then you can measure how many data you have and how far are you in the submitting.
You can simulate it with jQuery and a timer that extends the length of a colored div. Not really an server side genuine control but can be enough to make the visitors satisfied. The time and interval can be calculated due to what the user have to do.
Often, for the user experience, the look of the progress bar movement itself, it's more important then the fact its going to 100% (which usually are bad, if the action isn't fully finished before 100%).
[added]
You have to
Attach jquery script library with
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
Place and point a styled html control
<div style="height:20px;width:200px;background-color:#777" id="somediv"></div>
Point to it and affect it with javascript/jquery
<script type="text/javascript">
var width = 10;
$(document).ready(function() {
setTimeout("$('somediv').html('width,'" + width+10 + "')", 600);
});
</script>
Please understand this is a sort of pseudocode (not fully copy pastable) to get an idea of my description. The setTimeout javascript function would make the div being bigger for each interval. Like adding 10px each, which make a good point to reuse the variable for a textaul description.