Hello
it is possible to skin events in schedule separately? For example if i have various categories of events - important, normal etc... -important event is red, normal blue...
thanks
skinning events separately in schedule
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Yes, ScheduleEvent has a styleClass option you can use to display different kinds of events.
Can you please show me some example?
this is my code:
and i want something like this:
this is my code:
Code: Select all
<p:schedule value="#{tasksBean.eventModel}" editable="true" widgetVar="myschedule"
eventSelectListener="#{tasksBean.onEventSelect}"
dateSelectListener="#{tasksBean.onDateSelect}"
eventMoveListener="#{tasksBean.onEventMove}"
eventResizeListener="#{tasksBean.onEventResize}"
onEventMoveUpdate="messages,schedule" onEventResizeUpdate="messages,schedule"
theme="redmond" id="schedule">
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
You just need to define styleClasses with different background classes and set a different style. DefaultScheduleEvent has a method called setStyleClass(String styleClass) and an overloaded constructor that has a styleClass option.
hi,
the CSS "background-color" property is not (guaranteed to be) inherited. so for a simple event style class like "business-event" with a red background, you have to set the background color for the child elements of the event div separately. the following will work (PrimeFaces 3.0.M2, Firefox 5.0):
hth, rene
the CSS "background-color" property is not (guaranteed to be) inherited. so for a simple event style class like "business-event" with a red background, you have to set the background color for the child elements of the event div separately. the following will work (PrimeFaces 3.0.M2, Firefox 5.0):
Code: Select all
.business-event {
font-weight: bold;
font-style: italic;
}
.business-event > a {
background-color: red;
}
Mojarra 2.1.28, PrimeFaces 3.3.1, Primefaces Extensions 0.7.0, libservlet3.1-java tomcat8, openjdk-8-jdk
hi,
unfortunatly it does not work for me.
I'm using primefaces 3.0, firefox 3.6 and glassfish 3.1.
Looking around I found in the css this comment
I try also this solution but with no luck.
Any ideas are very appreciated
unfortunatly it does not work for me.
I'm using primefaces 3.0, firefox 3.6 and glassfish 3.1.
Looking around I found in the css this comment
Code: Select all
.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
border-style: solid;
border-color: #36c; /* default BORDER color (probably the same as background-color) */
background-color: #36c; /* default BACKGROUND color */
color: #fff; /* default TEXT color */
}
/* Use the 'className' CalEvent property and the following
* example CSS to change event color on a per-event basis:
*
* .myclass,
* .fc-agenda .myclass .fc-event-time,
* .myclass a {
* background-color: black;
* border-color: black;
* color: red;
* }
*/
Any ideas are very appreciated
Primefaces 3.2
Glassfish 3.1.2 (Mojarra 2.1.6)
Glassfish 3.1.2 (Mojarra 2.1.6)
Hi,
I resolved with a awfull solution. I opened the PF 3.0 jar and changed the schedule.css to not use border-color and background-color.
Now the events in the shedule have the colour I defined, so it works, but it is exactly what I did not want to do.
If anyone knows a different solution I will be very happy to rollback this modification.
Thanks in advance
I resolved with a awfull solution. I opened the PF 3.0 jar and changed the schedule.css to not use border-color and background-color.
Now the events in the shedule have the colour I defined, so it works, but it is exactly what I did not want to do.
If anyone knows a different solution I will be very happy to rollback this modification.
Thanks in advance
Primefaces 3.2
Glassfish 3.1.2 (Mojarra 2.1.6)
Glassfish 3.1.2 (Mojarra 2.1.6)
Hi all
I'm facing the same problem. I want to change the background color for some events, but it doesn't work.
I have defined this style:
but the defaut style is always active:
and here the firebug output:
Many thanks in advance!
Luc
I'm facing the same problem. I want to change the background color for some events, but it doesn't work.
I have defined this style:
Code: Select all
.holiday-event,
.fc-agenda .holiday-event .fc-event-time,
.holiday-event a
{
font-weight: bold;
font-style: italic;
background-color: red;
border-color: red;
color: red;
}
Code: Select all
<div id="globalform:myScheduler_container" class="fc ui-widget">
<div class="fc-content ui-widget-content" style="position: relative; min-height: 1px;">
<div class="fc-view fc-view-agendaWeek fc-agenda" style="position: relative;">
<div class="fc-agenda-head" style="position:relative;z-index:4">
<div class="fc-agenda-body" style="position: relative; z-index: 2; overflow: auto; height: 664px; width: 916px;">
<div style="position: relative; overflow: hidden;">
<table style="width: 899px;">
<div style="position: absolute; z-index: 8; top: 0pt; left: 0pt;">
<div class="fc-event fc-event-vert fc-corner-top fc-corner-bottom " style="position: absolute; z-index: 8; top: 587px; left: 61px; width: 107px; height: 40px;">
<div class="fc-event fc-event-vert fc-corner-top fc-corner-bottom " style="position: absolute; z-index: 8; top: 545px; left: 181px; width: 107px; height: 82px;">
<div class="fc-event fc-event-vert fc-corner-top fc-corner-bottom holiday-event ui-draggable ui-resizable" style="position: absolute; z-index: 8; top: 0px; left: 301px; width: 107px; height: 1004px;">
<a>
<span class="fc-event-bg"></span>
<span class="fc-event-time">12:00 - 11:59</span>
<span class="fc-event-title">Ferien1_5</span>
</a>
<div class="ui-resizable-handle ui-resizable-s">=</div>
</div>
</div>
</div>
</div>
Code: Select all
.fc-event-vert span.fc-event-time {
border: 0 none;
font-size: 10px;
overflow: hidden;
white-space: nowrap;
}
.fc-event, .fc-agenda .fc-event-time, .fc-event a {
background-color: #3366CC;
border-color: #3366CC;
border-style: solid;
color: #FFFFFF;
}
.fc-event-vert span {
display: block;
position: relative;
z-index: 2;
}
.fc-event-time, .fc-event-title {
padding: 0 1px;
}
Luc
PF Elite 6.0.3, Tomcat, JSF 2.2, Spring 3.2, Hibernate 4.2.16
-
- Posts: 1
- Joined: 28 Jan 2012, 20:22
Hi all!
I solved the same problem with the following trick:
It seems to me that css class style 'fc-event-skin' is wrongfully set to the inner div of the event, since it is specified in the primary event div with other classes (and with the custom one, which is set in the controller code for DefaultScheduleEvent).
So I have created new css class like this one
.onlineEvent {
border-color: #F00;
background-color: #F00;
color: #fff;
}
and set it to the ScheduleEvent in the controller code
DefaultScheduleEvent scheduledEvent = new DefaultScheduleEvent("Title",dateS, dateE );
scheduledEvent.setStyleClass("onlineEvent");
addEvent(scheduledEvent);
and removed class definition from the inner diff with jquery code
<script language='javascript'>
function clearEventInnerSkinStyle(){
jQuery('.fc-event-inner').removeClass('fc-event-skin');
}
</script>
<script>
window.onload=clearEventInnerSkinStyle;
</script>
I hope you can use that solution before primeface developers fix that issue.
I solved the same problem with the following trick:
It seems to me that css class style 'fc-event-skin' is wrongfully set to the inner div of the event, since it is specified in the primary event div with other classes (and with the custom one, which is set in the controller code for DefaultScheduleEvent).
So I have created new css class like this one
.onlineEvent {
border-color: #F00;
background-color: #F00;
color: #fff;
}
and set it to the ScheduleEvent in the controller code
DefaultScheduleEvent scheduledEvent = new DefaultScheduleEvent("Title",dateS, dateE );
scheduledEvent.setStyleClass("onlineEvent");
addEvent(scheduledEvent);
and removed class definition from the inner diff with jquery code
<script language='javascript'>
function clearEventInnerSkinStyle(){
jQuery('.fc-event-inner').removeClass('fc-event-skin');
}
</script>
<script>
window.onload=clearEventInnerSkinStyle;
</script>
I hope you can use that solution before primeface developers fix that issue.
Last edited by nickkvasov on 29 Jan 2012, 09:55, edited 1 time in total.
hello,
you can use this solution to this problem, the trick is in the definition of css class, it must declare like this:
css class :
java code :
you can use this solution to this problem, the trick is in the definition of css class, it must declare like this:
css class :
Code: Select all
.public-event, .public-event .fc-event-skin, .public-event a{
background-color: green;
color: black;
border-color: greenyellow;
}
Code: Select all
event = new DefaultScheduleEvent("public event", start, finish, "public-event");
-
- Information
-
Who is online
Users browsing this forum: No registered users and 23 guests