1. Tudásbázis
  2. Modulok használata
  3. Calendar blokk kinézetének testreszabása

Calendar blokk kinézetének testreszabása

Beküldte pante - 2013. január 24. 15.00
pante képe

Sziasztok!

Felmerült pár kérdés bennem a Calendar testreszabásával kapcsolatban.
Jelenleg így néz ki:
calendar

A mini naptár blokkban és a nagy naptárban is máshogy van kiemelve az adott (mai) nap és nincs kiemelve az a nap, amelyiken esemény van megjelölve. Ezeket hol tudom állítani a naptár beállításaiban? Vagy ha csak CSS segítségével tudom átszínezni a kérdéses cellák hátterét, milyen ID alatt szerepelnek a CSS fájlokban?

A lapozóval kapcsolatban is ugyanez lenne a kérdésem, hogy hogyan tudnám átszínezni illetve az alatta lévő üres rész mértékét lecsökkenteni (a képen bekarikáztam az ürességet)?

Végül hol tudom beállítani, hogy amikor a hónap nevére kattintok, csak a hónap naptár jelenjen meg és ne jelenjen meg a többi (éves, heti, napi) fül bontásban? Néztem a jogosultságokat, de csak úgy tudom beállítani, hogy a teljes naptár vagy megjelenik a vendégnek vagy nem, egyenként nem tudtam állítani a jogokat az évi/havi/heti/napi fülekre. Itt még egy érdekességre lettem figyelmes, hogy rossz a dátum sorrendje a teljes naptár fejlécében. Pl. havinál: Jan. 2013, hetinél: Jan. 21, 2013 hete (pedig a területi beállításokban és a dátum és idő részben is jól van beállítva a dátum formátuma és sorrendje)

Köszönöm előre is a segítségeteket!

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
calendar
Drupal verzió: 
7.x
Fórum: 
Modulok használata
Sk8erPeter képe

Beküldte Sk8erPeter - 2013. január 24. 16.39

sites/all/modules/calendar/css/calendar_multiday.css

http://drupalcode.org/project/calendar.git/blob/17fceb75ad1d0e9ae6d4ec00...

ez az, amiben meg vannak határozva a stílusok. Ne ezt szabd át, hanem az aktív sminkedbe rakd bele a saját módosításaidat, az a betöltési sorrendben úgyis később lesz, tehát az fog érvényre jutni.
Az aktuális nap a miniblokkban "today" és "mini" osztályokkal van ellátva, meg a nap nevének rövidítését tartalmazó osztálynévvel, ezenkívül "has-no-events" vagy "has-events" osztállyal, attól függően, hogy van-e esemény aznap, vagy nincs.

A böngésződ fejlesztőeszközével könnyen meg tudod vizsgálgatni a továbbiakat is (Ctrl+Shift+I vagy F12), Chrome-ban például ha rákattintasz az elemre jobb gombbal, majd az "Elem megtekintése" menüpontra, akkor megnyílik a megfelelő rész:

Chrome elem megtekintése

gondoltam nem adok halat, hanem inkább megtanítalak halászni :)

Konkrétabbat pedig akkor tudnánk mondani, ha látnánk az oldaladat élesben.

Végül hol tudom beállítani, hogy amikor a hónap nevére kattintok, csak a hónap naptár jelenjen meg és ne jelenjen meg a többi (éves, heti, napi) fül bontásban?

Views-nál le tudod tiltani, vagy feltételektől függővé tenni, esetleg átszabni az egyes fülek megjelenését.
Nálad konkrétan ez lesz a korábbi exportod alapján az elérési útja:

admin/structure/views/view/napt_r/edit

3
0
pante képe

Beküldte pante - 2013. január 24. 22.31

Igen, Chrome-ot használok. Köszönöm a leírást, mert (igaz 1-2 órás szöszmötölés után) de sikerült meglelnem a kérdéses részt és módosítottam. Így jobb, hogy már tudok "halászni" :)

Sajnos a pager alatti üres részt nem tudtam kiszedni, mert hiába néztem az elemet, nem tudom melyik CSS vonatkozik rá.

Bemásolom a mini calendar block átszínezését, hátha tudok ezzel segíteni másoknak is:

  1. /* MINI NAPTAR CSS, ADOTT NAPON VAN ESEMENY */
  2. .calendar-calendar td.has-events {
  3. background-color: yellow;
  4. border-style:solid;
  5. border-width:1px;
  6. border-color: black;
  7. }
  8.  
  9. /* MINI NAPTAR CSS, MAI NAP */
  10. .calendar-calendar td.today {
  11. background-color: #C3D6E4;
  12. border-style:solid;
  13. border-width:1px;
  14. border-color: black;
  15. }

Views-ben sikerült kikapcsolni a többi fül megjelenítését, így elérhetővé tudom tenni a mini calendar-t a látogatók számára is, és megmutatni Nektek, jelenleg hol tartok: Naptár havi nézet

Amit még szeretnék javítani a naptár havi nézetének fejléce. Az előző/következő gombok feliratát a fordítás menüpontban módosítottam E-re és K-ra, mert szétcsúszott tőle az oldal vagy a gombok kerültek egymás alá, így legalább elfér. Viszont úgy meg lehetne-e oldani, hogy a gombok felirata helyett inkább az előző hónap és a következő hónap rövidített nevei szerepeljenek, ami mini calendar-ban van? (E és K helyett szerintem beszédesebb lenne a Dec. és Feb.)
Illetve azt nem értem, hogy középen miért került felcserélésre az év és a hónap neve? Pedig jól van megadva a dátum formátum a beállításokban (elvileg a calendar modul azt használja), és itt már elférne a hónap teljes neve is, nem muszáj a rövidített, viszont erre nem találtam megoldást a views-ban. (sajnos "csúnya" módszerrel tudtam csak megoldani a hónap rövidített nevének kiiratását: a teljes nevet rövidítettre írtam át a fordítás menüben)
Ez utóbbi kódolást igényelne, mint a link-to-node vagy megoldható egyszerűen beállításokkal is?

0
0
pante képe

Beküldte pante - 2013. január 27. 22.27

Ha ez nem kivitelezhető, esetleg hogy lehetne megoldani, hogy a mini calendar pager közötti hónap név kijelzés, ne legyen link (ne legyen kattintható) ?

0
0
pante képe

Beküldte pante - 2013. január 28. 22.58

Közben sikerült megoldani az "üres rész" átméretezését is, bemásolom hátha tudok segíteni másoknak, akik hasonló cipőben jártak mint én:

  1. /* MINI NAPTAR LAPOZO ES HET NAPJAI KOZOTTI USER RESZ CSS */
  2. .view-header {margin-bottom: -30px !important;}

Nem tudom mennyire szép megoldás, de legalább működik.

0
0
szt képe

Beküldte szt - 2013. január 29. 11.12

Igen, ha a szövegrészek jó sorrendben vannak, és csak a kinézeten akarsz változtatni, akkor a css-ben kell turkálni, azaz az alsminked fő css fájljában a meglévő css szabályokat kell felülbírálnod.
Ha a html tageket szeretnéd babrálni, akkor általában .tpl fájlokat kell felülbírálnod.
Ha viszont csak valami konkrét szöveget szeretnél megváltoztatni, akkor ezeket a szövegeket előállító függvényeket kell felülbírálnod.

Illetve azt nem értem, hogy középen miért került felcserélésre az év és a hónap neve? Pedig jól van megadva a dátum formátum a beállításokban (elvileg a calendar modul azt használja), és itt már elférne a hónap teljes neve is, nem muszáj a rövidített, viszont erre nem találtam megoldást a views-ban.

A naptár havi nézetének fejlécében lévő dátum az sajna nem a core dátumformátumaiból érkezik, hanem egy themefüggvény állítja elő: a theme_date_nav_title függvény.
Ezt kell átalakítanod (azaz a smiked template.php fájljába bemásolod az egész függvényt, a függvénynévben a "theme" szót kicseréled a sminked nevére).
Ez a rész lesz az érdekes neked:

  1. case 'month':
  2.       $format = !empty($format) ? $format : (empty($date_info->mini) ? 'F Y' : 'F');
  3.       $title = date_format_date($date_info->min_date, 'custom', $format);
  4.       $date_arg = $date_info->year . '-' . date_pad($date_info->month);
  5.       break;

Írd át mondjuk erre (a date() függvény opciói közül bármit írhatsz):

  1. case 'month':
  2.       $format = !empty($format) ? $format : (empty($date_info->mini) ? 'Y. F' : 'F');
  3.       $title = date_format_date($date_info->min_date, 'custom', $format);
  4.       $date_arg = $date_info->year . '-' . date_pad($date_info->month);
  5.       break;

Itt a többi megjelenítést is át tudod írni, ha már dolgoztál php kóddal, könnyű dolgod lesz (Azért azt megjegyezném, hogy ez a megoldás nem foglalkozik az aktuális nyelvvel, szóval így angol nyelvre váltva is magyarított dátumok lesznek. Itt most az elv az érdekes, természetesen a nyelvváltást is bele lehet építeni a megoldásba).

A másik kérdés:

...esetleg hogy lehetne megoldani, hogy a mini calendar pager közötti hónap név kijelzés, ne legyen link (ne legyen kattintható) ?

Ez is szerencsére elintézhető ebben a függvényben. Ezt a részt:

  1.   if (!empty($date_info->mini) || $link) {
  2.     // Month navigation titles are used as links in the mini view.
  3.     $attributes = array('title' => t('View full page month'));
  4.     $url = date_pager_url($view, $granularity, $date_arg, TRUE);
  5.     return l($title, $url, array('attributes' => $attributes));
  6.   }
  7.   else {
  8.     return $title;
  9.   }

cseréld le erre az egy sorra:

  1. return $title;

PS: Ez a hozzászólás nem jöhetett volna létre a Theme developer modul nélkül ;)

3
0

Védd az állatokat! ;)

pante képe

Beküldte pante - 2013. január 29. 12.19

Köszönöm, kipróbáltam és tökéletesen működik! :) Az első megoldást használtam fel.

0
0
szt képe

Beküldte szt - 2013. január 29. 11.13

Bejött a global $language; sor az elején, és egy switch vált a nyelvek alapján.

  1. function SMINKEDNEVE_date_nav_title($params) {
  2.   global $language;
  3.   $granularity = $params['granularity'];
  4.   $view = $params['view'];
  5.   $date_info = $view->date_info;
  6.   $link = !empty($params['link']) ? $params['link'] : FALSE;
  7.   $format = !empty($params['format']) ? $params['format'] : NULL;
  8.   switch ($granularity) {
  9.     case 'year':
  10.       $title = $date_info->year;
  11.       $date_arg = $date_info->year;
  12.       break;
  13.     case 'month':
  14.       switch ($language->language) {
  15.         case 'en':
  16.           $format = !empty($format) ? $format : (empty($date_info->mini) ? 'F Y' : 'F');
  17.           break;
  18.         case 'hu':
  19.           $format = !empty($format) ? $format : (empty($date_info->mini) ? 'Y. F' : 'F');
  20.           break;
  21.       }
  22.       $format = !empty($format) ? $format : (empty($date_info->mini) ? 'Y. F' : 'F');
  23.       $title = date_format_date($date_info->min_date, 'custom', $format);
  24.       $date_arg = $date_info->year . '-' . date_pad($date_info->month);
  25.       break;
  26.     case 'day':
  27.       $format = !empty($format) ? $format : (empty($date_info->mini) ? 'l, F j, Y' : 'l, F j');
  28.       $title = date_format_date($date_info->min_date, 'custom', $format);
  29.       $date_arg = $date_info->year . '-' . date_pad($date_info->month) . '-' . date_pad($date_info->day);
  30.       break;
  31.     case 'week':
  32.       $format = !empty($format) ? $format : (empty($date_info->mini) ? 'F j, Y' : 'F j');
  33.       $title = t('Week of @date', array('@date' => date_format_date($date_info->min_date, 'custom', $format)));
  34.       $date_arg = $date_info->year . '-W' . date_pad($date_info->week);
  35.       break;
  36.   }
  37.   return $title;
  38. }
3
0

Védd az állatokat! ;)