| Home | Hilfe | Add-Ons | Templates | Spenden | Impressum | Datenschutz |

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

Seiten: 1

#1 08.03.2023 23:11:52

shack
Mitglied

[erledigt] Eventlist Darstellung / Design

Hallo,

ich bin jetzt nicht der super Coder aber mit WBCE sehr zufrieden, da es meine grundsätzlichen Bedürfnisse befriedigt und alle aus verschiedenen Vereinen beim Arbeiten damit klarkommen.

Jetzt zum Problem.

Wir haben die ganze Zeit mit einer externen Kalenderlösung gearbeitet, diese dann mit ExtCal eingepflegt. Mit meinem profunden Halbwissen gelang es mir auch, das ganze in einen Rahmen zu gestalten. Da habe ich im Stylesheet

border: 4px solid #314b68;  
    padding: 5px;
    margin: 5px;

hinterlegt und schon war jeder Termin in einem schönen Kasten drin.

Jetzt sollen die Termine in WBCE verwaltet werden, die einfache Kalenderlösung habe ich da jetzt nicht gefunden (er soll Kategorien können) und verwende jetzt ProCalendar.

Das mit der (gefilterten) Eventlist bekomme ich auch hin (immerhin), sieht dann aber unschön aus, weil, naja:

liste.png

Da ich schon zu blöd bin, die einzelnen Einträge überhaupt irgendwie in Form zu bringen (zB Abstände vergrößern, Zeilenumbruch), dachte ich mir, dass es vielleicht am einfachsten wäre, das Design der Tabelle aus dem Modul zu nehmen, die da so aussieht:

tabelle.png

und diese mit dem Ort zu erweitern. Termine, zu denen es einen Link gibt sollen fett sein.

Ob Kasten drum (und die jeweiligen Daten bisschen aufgeräumt) oder Tabelle oder egal was, ich wäre mit allem zufrieden, was nicht wie auf dem ersten Bild aussieht.

Keine Ahnung, ob ich hier das Unmögliche will oder selbst den Wald vor lauter Bäumen nicht sehe, aber vielleicht hat ja jemand einen Rat.

Danke und Gruß,
Shack.

Beitrag geändert von florian (15.03.2023 10:30:17)

Offline

#2 13.03.2023 15:26:47

shack
Mitglied

Re: [erledigt] Eventlist Darstellung / Design

Ich abe jetzt mal viel probiert, leider alles ohne Erfolg.

Die Frontend css des Kalenders

.show_calendar {margin-bottom:20px;}
.calendarmod {border-collapse:collapse;background:#fff;width:100%;font-size:12px;font-family:arial,helvetica,sans-serif;border:1px solid #bbb;}
.calendarmod a {text-decoration:none;display:block;}
.calendarmod td {height:20px;text-align:center;line-height:20px;border:1px solid #bbb;}
.arrows {float:left;width:50%;}
tr.calendarmod-header td {text-align:center;font-weight:bold;background:#01457f;color:#fff;}
tr.calendarmod-header td a {display:block;height:20px;line-height:20px;background:#bcbdc0;font-size:16px;}
tr.calendarmod-header td a:hover {background:#9ad5f4;color:#01457f;}
td.calendar_weekday {background:#01457f;width:14%;color:#fff;}
td.calendar_markday {background:#eee;font-weight:bold;}
td.calendar_markday:hover {background:#ddd;}
td.calendar_noday {background:#fff;} 
td.procal_today {border:2px solid #ff0000;} 
.event_details {min-height:350px;}
.actionlist {min-height:197px;}
.actionlist_header {font-weight:bold;}
.actionlist_date {white-space:nowrap;padding:3px 5px !important;}
.actionlist_time {white-space:nowrap;padding:3px 5px !important;}
.actionlist_name {padding:3px 5px !important;}
.actionlist_actiontype {white-space:nowrap;padding:3px 5px !important;}
.actionlist_table  {width:100%;font-size:12px;font-family:arial,helvetica,sans-serif;border:1px solid #bbb;}
.actionlist td {padding:3px 0;vertical-align:top;}
.actionlist tr {background:#fff;}
.actionlist tr:nth-child(odd) {background:#eee;}
.actionlist tr:hover {background:#ddd;}
.actionlist_headernav {margin:10px 0;}
.actionlist_headernav h2 {padding:0 !important;margin:0 !important;}
.actionlist_headernav a {text-decoration:none;}
.actionlist_headernav td.arrow_left {padding:3px 0 0 10px;font-size:11px;text-align:left;}
.actionlist_headernav td.arrow_right {padding:3px 10px 0 0;font-size:11px;text-align:right;}
a.go_back {font-weight:bold;text-decoration:none;}
.info_block {position:relative;float:right;width:170px;padding:10px;border:1px solid #ccc;background:#f4f4f4;margin:5px 0 15px 15px;background:#eee;}
.info_block .field_line {width:100%;clear:both;line-height:15px;margin-bottom:8px;}
.info_block .field_title {width:100%;font-weight:bold;padding:0;margin:0;}
.float_right {float:right;}
/* EXAMPLE STYLES FOR CATEGORIES 
#acttype1 {background:red;}
#acttype2 {background:green;}
#acttype3 {background:cyan;}
#acttype4 {background:blue;}
#acttype5 {background:brown;}
#acttype6 {background:purple;}
/* END OF EXAMPLE STYLES FOR CATEGORIES */
/* STYLES FOR THE MINIJS DROPLET */
/* copy this to your normal template stylesheet if you want to show the minicaljs on each page */
table.inner {border-collapse:collapse;}
table.inner td {border:1px solid #ccc;padding:2px;}
table.inner .event {color:#01457f;font-weight:bold;}
table.inner .event:hover {font-weight:bold;cursor:pointer;color:#f47325;}

und der untere Teil des Droplets eventlist

[== PHP ==]

$mod_list = '<table style="border-collapse: collapse;">';                

//
// Fetch the items
if (!isset($actions) || empty($actions))
  $actions  = fillActionArray($datestart, $dateend, $section_id);

if (is_array($actions)){
	foreach($actions as $row){
		if ($max > 0) {
			if (!isset($kat) || (isset($kat) && in_array($row["acttype"], explode(',',$kat)))) {
			   $max--;
			   $ds = $row['date_start']." ".substr($row['time_start'],0,5);
			   $de = $row['date_end']." ".substr($row['time_end'],0,5);
			   // Build url like : pages/kalendar.php?year=1900&month=01&day=03&id=2&detail=1    
			   $page_url = $page_link.'?year='.(substr($ds,0,4)).'&month='.(substr($ds,5,2)).'&day='.(substr($ds,8,2)).'&id='.$row['id'].'&amp;detail=1';
			   $datetime_start = mktime(substr($ds,11,2),substr($ds,14,2),0,substr($ds,5,2),substr($ds,8,2),substr($ds,0,4));
			   $datetime_end = mktime(substr($de,11,2),substr($de,14,2),0,substr($de,5,2),substr($de,8,2),substr($de,0,4));
			   if ($datetime_start<> $datetime_end) {  
			      $mod_list .= '<tr style="background-color: '.$row["act_format"].'"><td><span class="c_date">'.date($dateformat,$datetime_start).' - '.date($dateformat,$datetime_end) .'</span> &nbsp;</td> ';
			   } else {
			      $mod_list .= '<tr style="background-color: '.$row["act_format"].'"><td><span class="c_date">'.date($dateformat,$datetime_start).'</span> &nbsp;</td> ';
			   }	
			   $mod_list .= '<td><a href="'.$page_url.'"><span class="c_name"><b>'.$row["name"].'</b></span></a></td>';
			   $mod_list .= '<td><div class="c_desc">'.$row["custom1"].'</div></td>';
			   $mod_list .= "</tr>";
			}
		}
	}
}
return $mod_list."</table>";

scheinen irgendwie zur Lösung anzuregen...  smile

Ich gehe davon aus, dass ich im Droplet auf irgendwas in der Kalender-Frontend-CSS verweisen muss, ggf dort ebenfalls tätig werden sollte.

Hat hier jemand einen Hinweis für mich?

Ich bemühe mich ja nach Kräften, aber ich bin im Verein auch nur der Einäugige. Ich verdiene hier kein Geld mit, eher ist das Gegenteil der Fall.

ich wäre für eine Hilfestellung sehr dankbar.

Offline

#3 13.03.2023 18:08:35

florian
Administrator

Re: [erledigt] Eventlist Darstellung / Design

Die Tabelle auf der Kalenderseite selbst lässt sich nur mit viel Gefrickel direkt in den Moduldateien anpassen, da ist die vom Droplet erzeugte Listenausgabe schon eher ein Ansatzpunkt. Auch da sind allerdings Anpassungen erforderlich, wenn weitere Angaben (wie zum Beispiel die Mannschaft = Kategorie) in der Liste ausgeben werden sollen oder der hinterlegte Link verwendet werden soll, weil standardmäßig immer auf die Eintragsdetailseite verlinkt wird.

Ich habe das jetzt mal annähernd zurechtgebastelt (einfach kompletten Code des Eventlist-Droplets austauschen):

// Shows an event list from procalendar >= 1.3
// usage: [[eventlist?section_id=<xx>&max=<xx>&kat=<xx>,<xx>&days=<xx>&year=<xx>&month=<xx>&startnow=1]]
// parameters:
// 	 section_id : Section id from procalendar module
// on default all events of the current month are shown but you can custumize by using options:
//   max (integer) 		: limits event list to max items (if no other limit is reached already)
//	 kat (integer) 		: only show defined kategories, kat ids can be found in prcalendar backend options
//											more than one kategorie can be used by seperating ids with commas (no spaces) 
//   days (integer) 	: limits event list to items for <days> (if no other limit is reached already)
// 	 year (integer) 	: year of start date
// 	 month (integer)	: month of start date
// 	 dateformat (string): fomat of date representation as described in http://www.php.net/manual/en/function.date.php#refsect1-function.date-parameters
// 	 startnow (0/1) 	: 0 or not set = show calendar month, 1 = start at current day
// 	 archive (integer): if set, elapsed events are shown for $days, backward form now
	
global $database;
require_once(WB_PATH."/modules/procalendar/functions.php");

$startnow = isset($startnow) ?  intval($startnow) : 0;
$max = isset($max) ? intval($max) : 10000;
$fixdays = isset($days);
$days = isset($days) ? intval($days) : 31;
$year = isset($year) ? intval ($year) : date('Y');
$month = isset($month) ? intval($month) : date('n');
$section_id = isset($section_id) ? intval($section_id) : 0 ;

// Set dateformat to suit your needs, add timeformat if needed
$dateformat = isset($dateformat) ? $dateformat : 'd-m-Y'; // Standard php date formats

// Fetch base page link
$page_id = 0;
$page_link ='';

if ($section_id<>0) { 
  $sql = "SELECT link FROM ".TABLE_PREFIX."sections AS s, ".TABLE_PREFIX."pages AS p WHERE s.section_id = '".$section_id."' AND s.page_id = p.page_id";
  $page_link = WB_URL.PAGES_DIRECTORY.$database->get_one($sql).PAGE_EXTENSION;
}

// Set start- and end date for query
$datestart = $startnow ? date('Y-n-j') : "$year-$month-1";

$dateend = $startnow ? date('Y-n-j', strtotime("+".($days-1)." day")) : ($fixdays ? date('Y-n-j', strtotime($datestart." + ".($days-1)." day")) : ("$year-$month-".($days < cal_days_in_month(CAL_GREGORIAN, $month,$year) ? $days : cal_days_in_month(CAL_GREGORIAN, $month,$year))));

if (isset($archive)) { 
  $dateend = date('Y-n-j');
  $datestart = date('Y-n-j', strtotime("-".($days-1)." day"));
} 

$kats = array();
$res = $database->query("SELECT * FROM `".TABLE_PREFIX."mod_procalendar_eventgroups` ");
if($res) {
  while ($row = $res->fetchRow()) {
    $kats[$row['id']] = $row['name'];			
  }
}


$mod_list = '<table class="terminliste">';
$mod_list .= '<tr><th>Datum, Uhrzeit</th><th>Bezeichnung</th><th>Ort</th><th>Mannschaft</th></tr>'; 


// Fetch the items
if (!isset($actions) || empty($actions))
  $actions  = fillActionArray($datestart, $dateend, $section_id);

if (is_array($actions)){
	foreach($actions as $row){
		if ($max > 0) {
			if (!isset($kat) || (isset($kat) && in_array($row["acttype"], explode(',',$kat)))) {
			   $max--;
               
			   $ds = $row['date_start']." ".substr($row['time_start'],0,5);
			   $de = $row['date_end']." ".substr($row['time_end'],0,5);
			   // Build url like : pages/kalendar.php?year=1900&month=01&day=03&id=2&detail=1    
			   $page_url = $page_link.'?year='.(substr($ds,0,4)).'&month='.(substr($ds,5,2)).'&day='.(substr($ds,8,2)).'&id='.$row['id'].'&detail=1';
			   $datetime_start = mktime(substr($ds,11,2),substr($ds,14,2),0,substr($ds,5,2),substr($ds,8,2),substr($ds,0,4));
			   $datetime_end = mktime(substr($de,11,2),substr($de,14,2),0,substr($de,5,2),substr($de,8,2),substr($de,0,4));
			   if ($datetime_start<> $datetime_end) {  
			      $mod_list .= '<tr style="background-color: '.$row["act_format"].'"><td><span class="c_date">'.date($dateformat,$datetime_start).' - '.date($dateformat,$datetime_end) .'</span>  </td> ';
			   } else {
			      $mod_list .= '<tr style="background-color: '.$row["act_format"].'"><td><span class="c_date">'.date($dateformat,$datetime_start).', '.substr($row["time_start"],0,5).' </span>  </td> ';
			   }	
                if ($row["custom3"]!='') {
                  	$mod_list .= '<td><a href="[wblink'.$row["custom3"].']"><span class="c_name"><b>'.$row["name"].'</b></span></a></td>';
                } else {
			   		$mod_list .= '<td><a href="'.$page_url.'"><span class="c_name">'.$row["name"].'</span></a></td>';
                }
              
              $mod_list .= '<td><div class="c_desc">'.$row["custom1"].'</div></td>';
                 $mod_list .= '<td><div class="c_kat">'.$kats[$row["acttype"]].'</div></td>';
			   $mod_list .= "</tr>";
			}
		}
	}
}
return $mod_list."</table>";

Das gibt dann eine Tabelle mit Datum und Uhrzeit, Bezeichnung, Ort und Kategorie aus.
Wenn als frei definierbares Feld 3 ein interner Link hinterlegt ist, wird dieser anstatt des Links zur Detailseite ausgegeben.

Das ganze kann dann noch per Stylesheet aufgebrezelt werden, z.B. so

table.terminliste {
  border-collapse:collapse;
  width:100%;
}

table.terminliste th {
  background-color:#666; 
  color:#000;
}

table.terminliste tr:nth-child(even) {
  background-color: #f2f2f2;
}

Sollte dann im Endeffekt ungefähr sowas bei rauskommen:
attachment.php?item=3402&download=1

Beitrag geändert von florian (13.03.2023 18:09:31)

Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

shack

#4 14.03.2023 12:45:51

shack
Mitglied

Re: [erledigt] Eventlist Darstellung / Design

Wow!  yikes

Damit hätte ich jetzt nicht gerechnet. Vielen, vielen Dank!

Ich habe aber noch 2 Fragen:

Ist es möglich, die Überschirften der Tabelle linksbündig zu bekommen?

Und welche CSS nehme ich? Ich habe den Code mal in die frontend.css des Moduls kopiert, allerdings ohne Erfolg.

Offline

#5 14.03.2023 13:23:07

florian
Administrator

Re: [erledigt] Eventlist Darstellung / Design

Installier Dir das Admintool Frontend Final CSS und schreibe da die Styleanweisungen rein.
Für linksbündige Überschriften ändere

table.terminliste th {
  background-color:#666; 
  color:#000;
}

in

table.terminliste th {
  background-color:#666; 
  color:#000;
  text-align:left
}

Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

shack

#6 14.03.2023 13:27:22

shack
Mitglied

Re: [erledigt] Eventlist Darstellung / Design

Funktioniert.

Danke, danke, danke!

Offline

Liked by:

florian

Seiten: 1

Fußzeile des Forums

up