Teamkalender mit JSF erstellen

[TLow]

Meine Aufgabe ist es, die in SAP eingegebenen Abwesenheitszeiten für einen oder mehrere Mitarbeiter abfragen zu können und in einer Übersicht anzuzeigen. Der Kalender soll etwa so aussehen, wie es auf dem Bild zu sehen ist. Kennt jemand eine Möglichkeit mit jsf einen solchen (ähnlichen) Teamkalender zu erstellen?

(Auf der linken Seite werden die Mitarbeiter gelistet. Die Balken sind die Abwesenheitszeiten.)

 

[stg]

Eine fertige JSF-Komponente ist mir da nicht bekannt, aber das ist doch über eine einfache Tabelle bzw panelgrid schnell zusammen-gebastelt. Hast du konkrete Fragen?

Wenns auch jQuery sein darf, da gibt es etwas mehr auswahl. Siehe z.B. http://demos.telerik.com/kendo-ui/scheduler/timeline

 

[TLow]

Vielen Dank für die schnelle Antwort, jedoch kann ich noch kein jQuery und habe vorerst keine Zeit es zu lernen. Ich hab die Tabelle selber zusammengebastelt. Jetzt muss nur noch die logik implementiert werden.

Werde mich melden, sobald ich weitere Fragen habe.

Viele Grüße

TLow

 

[TLow]

So, wieder einmal benötige ich Hilfe, da ich nichts dazu gefunden habe. Ich möchte eine Zelle komplett mit der blauen/weißen Farbe füllen, die im Screenshot zu sehen ist. Bisher funktioniert das ganze nicht so ganz. Hier mein Code:

       <p:dataTable id="zeit" var="mitarbeiter" value="#{mitarbeiterAbwesenheit.mitarbeiter}">
         <p:column style="background-color: white">
           <f:facet name="header">
           Name
           </f:facet>
           <h:eek:utputText value="#{mitarbeiter.name}"/>
     
         </p:column>
         <p:columns id="zeit" var="datum" value="#{mitarbeiterAbwesenheit.datum}" style="background-color:  white; width: 20px; "  >
       
             <f:facet name="header">
                 #{datum.wochentag}
                 <br/>
                 #{datum.tag}
             </f:facet>
             <h:panelGrid  style="width: 20px; background-color: #{mitarbeiterAbwesenheit.mitarbeiterAbwesend(datum.tag,mitarbeiterAbwesenheit.monat,mitarbeiterAbwesenheit.jahr,mitarbeiter) ? 'blue' : 'white'}  "></h:panelGrid>
         </p:columns>
       </p:dataTable>

Wie bekomme ich den Rand weg, damit das Panelgrid die gesamte Zelle füllt?

 

[stg]

Dann setz dein CSS doch auf die Zelle (das td-Tag) und nicht auf das panelGrid, welches du dort einbettest. (Wozu ist das überhaupt da? Das erscheint hier ein wenig Fehl am Platz. Oder willst du wirklich in jede TabellenZelle eine weitere Tabelle rendern?)
Wenn du das unbedingt mit einer p:dataTable machen willst, dann kannst du dir so behelfen, dass du in Abhängigkeit von der Zeile eine rowStyleClass setzt und in Combination mit der Column-Styleclass dann den Hintergrund setzt. So hab ich das mal gemacht, sah dann im Ergebnis so aus:

.myrowstyleclass td.mycolumnstyleclass
{
  font-weight: bold;
  color: #00ff00;
  background-color: #ff0000 !important;
}

Aber wenn du sonst keine weiteren Datatable-Funktionalitäten benötigst, würde ich, wie schon zuvor erwähnt, mir die Tabelle einfach selbst in einer Schleife zusammenbasteln.