I was wondering if there is a way to change the graphic of an event in Fullcalendar v5.
As it for now i know that if you set the properties Allday to "True" you'll see a full blue event, if you don't you'll see a different one. Are there some other event graphic type? Because i created a calendar with 3 type of event but 2 of these graphically results equal so it's a little bit sad.
It would be cool even just a way to change the color from blue to something else based on the type of event choosen, maybe it would be even better. Thanks <3
(image to show the 3 type of event i created and the fact that 2 of them are the same because they do not have allday: true)
Related
I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.
I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object
I would like to disabled slot time on drag and drop event when the slot has been already taken. How could I make it work?
I'm using Fulcalendar Event javascript and my event duration is only 15 minutes like this:
I checked the doc but didn't found how. I think I have to compare the title event already taken to blank in jQuery before accept the new drag and drop event if it's return true.
You can use the eventOverlap option in fullCalendar, like this:
eventOverlap: false
This will mean that the UI will prevent events from being dragged or resized such that they fully or partially take up space occupied by an existing event.
See https://fullcalendar.io/docs/event_ui/eventOverlap/ for more details.
This question is a follow up to In high chart how to add event for label click
Is there a way to make the total sum number (ie. 10,9, 11, 11, 8)
as shown at http://jsfiddle.net/t07ok5v3/5/ clickable? (ie. add the same functionality to the "9" as the "Oranges" label). What if there is only one number per column at the top representing the sum?
The following code was the code given in the answer to add the label click.
chart.xAxis[0].labelGroup.element.childNodes.forEach(function(label)
{
label.style.cursor = "pointer";
label.onclick = function(){
alert('You clicked on '+this.textContent);
}
}
UPDATE: I have made the stackLabels all appear to be clickable (they now have cursor "pointer', see jsfiddle link below). Now I just need to add the actual functionality of the click event to the stackLabel. Can someone help me with this?
http://jsfiddle.net/w291/gc1fdd1v/
Note: I don't have access to jquery in the development environment I am using.
UPDATE 2: The answer to this other question seems to solve my problem [so far] (I will update the post with my solution if it works): Click event on clicking on the graph
For this purpose, you can use Custom Events plugin. It will allow you to add custom events on various elements like axis labels, legend, etc.
Plugin Reference:
https://www.highcharts.com/plugin-registry/single/15/Custom-Events
Example:
http://jsfiddle.net/trmks8p2/
I've created an image map using the code:
$('img').mapster({
staticState: true
})
All areas are selected at once and visible. Is there any way, any method I could hide/disable some areas so that they wouldn't be visible ? I would like to filter areas on some conditions.
I know that I can remove 'area' tag or href atribute from javascript level and then call the above code once more (once again recreate imagemapster) but is there any more elegant and smarter way ? Maybe there is some build-in plugin solution but I couldn't find that.
Thank you for any help.
Kind Regards
Marcin
I suggest you to change to
$('img').mapster({
selected: true,
isSelectable: false, // can't change of state by simple click
isDeselectable: false, // can't change of state by simple click
})
you can still bind the onClick callback on all the areas.
once you decide which areas you don't want, you can set the individual state via
$("#id_of_area").mapster('set',false);
or from the map id
$("img").mapster('set',false,'key or string of keys to deselect');
it seems staticState is just for show, and doesn't set everything to a selected state... ( I tried some combinations and had weird results like making it darker like on selected+highlight)
Something like this http://jsfiddle.net/Wvzgj/529/
A bit background:
I've got a page with a table and a number of checkboxes. The page is generated in asp.net.
Each row has a checkbox, there's a checkbox in the header, and in certain cells there will be groups of check boxes (you get the picure lots of checkboxes).
Each of these check boxes currently works fine with a little bit of javascript magic in their onclick events.
so you have something like:
<td><input type="checkbox" id="sellRow1" onclick="javascript:highlightRow(this, 'AlternateRowStyle1');"/></td>
Not much of a surprise there then.
Ok so the here's the problem:
So this works fine however I need each of the check boxes to reflect the states of other checkboxes. So for example: the checkbox in the header changes the values of the row checkboxes, changes to the row checkboxes can change the header check box etc.
I know what you're thinking: easy just call that Javascript function highlightRow.
But if I did how would I get the parameters (ok the this is easy but where on earth could I get that 'AlternateRowStyle1'?)
So I guess the question is: Where do I put those parameters so I can get at them with JS in a nice cross browser way. (<PossibleRedHerring>tried putting custom attributes on each checkbox but wasn't sure that was the correct way to go</PossibleRedHerring>), also I'd prefer not having to keep calling back to the server if that's at all avoidable.
(btw sorry if this is a bit badly formatted / written, I'm extraordinarily tired!)
Update:
Ok so in the end I managed to dodge the custom attributes as noticed that there was a hierarchy to the check boxes. This meant I was able to trigger the click event of the child checkboxes (which inturn would call it's childrens' click event etc) luckily in this case the flow will never go in the opposite direction causing an infinite loop (there are a lot of comments / documentation to point this out!)
The only interesting thing with this is the difference between click events in IE and in firefox, chrome and safari. IE allows anything to have a click where as the others limit click to INPUT elements of type button, checkbox, radio, reset or submit. I kind of wanted to use event bubbling to attach the click events to an element that contained a group of checkboxes.
In the end went with a bit of a hack:
// In IE every element supports Click wilst Firefox (also chrome and safari) only supports INPUT elements of type button, checkbox, radio, reset or submit
// https://developer.mozilla.org/en/DOM/element.click
// this function allows both browers to support click on all elements
function FireClickEvent(element)
{
if (element.click)
{
element.click();
}
else
{
// We don't have a click on this element, so add our own.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
}
Think that could be somewhat improved but it does the business for now.
Should also admit this was my first shot at proper javascript. It's a bit of a scary language (esp when hitting the dom!) interesting though, am looking forward to spending a bit of time delving in further.
you can do this quite easily by using jquery. you can define some custom attributes on the checkboxes depending upon their position and pick up the value of attributes on click and manipulate the css of rows, checkbox the way you want.
thats how you can define alternate row color for the table using jquery
$("table tr:nth-child(even)").addClass("striped");
<style>
.striped{
background-color:#efefef;
}
</style>
I think custom attributes is indeed your solution, can't see any problem with that. Although I would put something like an alternate-row-style as an attribute of the row, and not as an attribute of the checkbox.
If I understand you correctly; you want to be able to klick on the header and all the checkboxes in that same row will be checked?
I would set a cssclass for the "th"-element and use that same class on each of the "td"-elements.
I would place the alternating class on every second "tr" element. That way you can style differently if it's an alternating item or not.
I would also use jQuery to easily create the js-code.
I would NOT add custom attributes since... well you can't just add your own imaginary attributes, that's why we have html-standards.