Autor Zpráva
Vendy
Profil
Ahoj,

narazila jsem nyní v novém pluginu kalendáře akcí na dost problematickou část:

Když do kalendáře zadám jakoukoliv akci, určuji jí i kategorii. Každá kategorie má svou vlastní barvu. Nicméně v kalendáři se vše zobrazuje jen černě.
Jak donutit kalendář, aby zapisoval upozornění na akci do jednotlivých dnů skrze barevnost jejich kategorií?
A to i za předpokladu, že v jeden den bude pět akcí z různých kategorií a tudíž by se v tomto okénku příslušného dne mělo zobrazit pět proužků různých barev. Nebo to budou akce ze stejné kategorie a těch pět proužků bude mít stejnou baru, ale prostě tam budou.

Jde nějakým zápisem CSS donutit kalendář k takovému chování?

K vidění je na této testovací subdoméně.

Předem děkuji za každý nápad, Vendulka
anonymníí
Profil *
Vendy:
Jde nějakým zápisem CSS donutit kalendář k takovému chování?
Ano, jde. Například za pomoci přidáním třídy/tříd k dané buňce tabulky. Na základě třídy můžeš nastavit pozadí.

1. Pokud je jednobarevné, je to sranda.
2. Pokud je vícebarevné, tak v některých prohlížečích můžeš použít vícenásobné pozadí (hledej). Aby to fungovalo všude, budeš muset použít obrázek, který bude dané barevné proužky obsahovat. Obrázků bude tolik, kolik bude možných kombinací (při 5 kategoriích to bude celkem 25 možností + 5x jednobarevné pozadí, jestli dobře počítám). Přiřazení obrázku na základě třídy/tříd je pak analogie k 1) výše.


U tebe zatím nevidím nic, jak by se jednotlivé dny měly odlišovat, všechny "aktivní" mají nastaven background: #333;, proto jsou tmavošedé.

Nic jako "kategorie má svou barvu" v CSS bez práce s identifikátory/třídami neexistuje.
Vendy
Profil
anonymníí:
Ono je hlavně divné, že když si kalendář zobrazím v plné velikosti, tak se tam ty barvy zobrazují, zatímco v mini velikosti ve widgetech je prostě jen jedna barva.

Aby to fungovalo všude, budeš muset použít obrázek, který bude dané barevné proužky obsahovat. Obrázků bude tolik, kolik bude možných kombinací (při 5 kategoriích
No tak to bych se umalovala :) Těch pět kategorií je jen příklad, reálně jich je daleko víc.

Asi budu muset zvolit nějakou zlatou střední cestu. Dnům, kdy je nějaká akce, dát konkrétní barvu a pod mini kalendář vložit odkaz na zobrazení kalendáře v plné velikosti.

Ale ani to podmíněné zobrazení něčeho (barvy či ikonky) ve dnech, kdy se něco děje, nevím, jak udělat.
anonymníí
Profil *
Vendy:
I vzhledem k dalším tématům, které zde máš, si myslím, že bude lépe, když poptáš někoho, kdo má alespoň základy HTML/CSS. Bude to otázka chvilky. Základy nemáš ničeho, a to vůbec žádné. Jakékoliv vysvětlování je pak složité.

Píšeš: „Ale ani to podmíněné zobrazení něčeho ... ve dnech, kdy se něco děje, nevím, jak udělat“, ale ve skutečnosti to oddělení dnů již existuje a má tmavošedou barvu, což jsem už jednou zmiňoval.
Tomáš123
Profil
Vendy:
Teoreticky si neviem predstaviť, ako by to malo vyzerať hotové... Ak bude v jeden deň iba jedna akcia (a akcií bude napr. 10), bude zafarbená iba desatina plochy? To je trochu nepraktické. Ideálne by bolo, aby v prípade jedinej akcie na deň bol zafarbený celý deň jednou farbou, dve akcie by rozdelil políčko na polovicu atď.. Momentálne ale nemám predstavu o tom, ako niečo podobné vytvoriť hoci aj pokročilými praktikami HTML a CSS.

Čo sa týka jednoduchšej verzie s postupným zafarbovaním plochy, jednej položke kalendára pridáš triedy, ktoré reprezentujú akcie na určitý deň:
<polozka_kalendara class="udalost1 udalost2 udalost3 udalost4">12</polozka_kalendara>
CSS by mohlo vyzerať takto:
polozka_kalendara {/*definovanie vzhľadu položky*/}
udalost1 {background-image: url(udalost1.png)}
udalost2 {background-image: url(udalost2.png)}
udalost3 {background-image: url(udalost3.png)}
udalost4 {background-image: url(udalost4.png)}
Pokročilejším spôsobom by to možno šlo riešiť definovaním pozícií obrázkov. Správne by to ale fungovalo iba v prípade, že by boli naraz dostupné všetky akcie, prípadne, nebola by vynechaná žiadna udalosť z prostriedku zoznamu.

Tento zložitejší spôsob y šlo imitovať použitím absolútneho poziciovania pre staršie prehliadače. Avšak, defekty sú myslím rovnaké.

Prípadne by možno šlo umiestniť do pozadia položky všetky udalosti a hrať sa so z-indexom. Alebo absolútne poziciovať každú udalosť, alebo vytvoriť prvky určitej šírky (šírka prvku/celkový počet udalostí) a absolútne poziciovať pásiky a hrať sa so z-indexom, aby neprekážali textu.

anonymníí:
Základy nemáš ničeho, a to vůbec žádné.
Ach.
anonymníí
Profil *
Tomáš123:
Ach.
Vím, že máš potřebu na mě reagovat, ale příště si to odpusť.

CSS by mohlo vyzerať takto
Takto určitě ne, třídy se v CSS zapisují jinak. Vendy v tom tápe už tak, guláš jí v tom děláš ještě větší.

Mimoto, tebou uvedený příklad bude generovat vždy jen jednu barvu přes celou plochu, nebude dělat vícebarevné pozadí, což tazatelka chce. V daném případě, ač element má 4 třídy, bude mít pozadí nastavené k .udalost4

Vendy:
Nejjednodušší (ale, vzhledem k tvým znalostem i tak složité - třeba se toho ujme někdo jiný a doplní mou myšlenku do kódu) bude vytvořit si jakýsi grid, kde rodič bude obsahovat počet akcí konaných v daný den (ten znáš, když je vypisuješ, musíš být schopna je na úrovni PHP i spočítat), na základě které budeš rozdělovat barvičky na daný počet.

<div class="akce a4"><!-- 4 akce v dany den -->
    <a class="yellow" href=""></a>
    <a class="blue" href=""></a>
    <a class="green" href=""></a>
    <a class="purple" href=""></a>
</div>

<div class="akce a5"><!-- 5 akci v dany den -->
    <a class="yellow" href=""></a>
    <a class="blue" href=""></a>
    <a class="green" href=""></a>
    <a class="red" href=""></a>    
    <a class="purple" href=""></a>
</div>

<div class="akce a1"><!-- 1 akce v dany den -->
    <a class="red" href=""></a>
</div>

V CSS pak bude
.akce {position: relative; width: 30px; margin-bottom: 10px; overflow: hidden}
.akce > a {float: left; height: 30px;}
.akce > a:before {position: relative; content: ''}

.a1 > a {width: 100%;}
.a2 > a {width: 50%;}
.a3 > a {width: 33.3%;}
.a4 > a {width: 25%;}
.a5 > a {width: 20%;}

.yellow {background: yellow;}
.blue {background: blue;}
.purple {background: purple;}
.green {background: green;}
.red {background: red;}

Ukázku, jak to funguje, máš tady.
jsfiddle.net/05hnmsfc/1


Vendy:
Pro ukázku jsem volil div a odkaz. Místo divu budeš mít asi TD, odkaz možná zůstane, pokud se z barvičky má dát odkázat pryč.

Princip je snad zřejmý, tedy aspoň na úrovni HTML/CSS.
Vendy
Profil
anonymníí:
Základy nemáš ničeho, a to vůbec žádné. Jakékoliv vysvětlování je pak složité.
Správný odhad a plně si to uvědomuji. Nejsi jediný, kdo si mých neznalostí a věčné zoufalé snahy všiml a dobrá duše se mi nabídla, že provede nastavení. Ale děkuji za rady - přesunu je dál.


Tomáš123:
Děkuji za rady :) To konstatování mých neznalostí od anonymního uživatele mne nijak neuráží, protože má, bohužel, pravdu. Ještě horší je ovšem fakt, že lidé okolo mne mé znalosti přeceňují, protože oni umí PC jen zapnout a těžko jim pak dokáži vysvětlit, že dávat něco do šablony a umět kódovat je něco naprostzo jiného.
Ale děkuji, že tu se mnou máte trpělivost.
Tomáš123
Profil
anonymníí:
Panebože, reagujem na tvoje drzé a povýšenecké správanie. Vedz, že ak by si si tu vetu odpustil, vo svojom príspevku by som tvoj nick nespomenul. Vendy sa súhlasom podceňuje (byť schopná pochopiť, čo sa ti niekto snaží vysvetliť už je istá úroveň; nie si na tom až tak zle).

Vytvoril som iba pseudokód, aby som prezentoval možnosti. Očakával som, že si to Vendy prečíta, premyslí si, či jej záleží na podpore, prípadne si vyberie podľa nej najjednoduchšie riešenie a zostavíme ukážku, vysvetlíme na príklade.

Prišlo mi nevhodné vysypať 50 riadkov kódu a prípadne zvýrazniť, že ten komu sa snažím poradiť nemá žiadne znalosti, základy a že to nemá význam riešiť.

Nedošlo mi, načo je v tvojom kóde position: relative. Chystáš si miesto pre číselný údaj dátumu?

tebou uvedený příklad bude generovat vždy jen jednu barvu přes celou plochu
Mal som v pláne použiť obrázky (možnosť pridania ikonky) s fixnou šírkou a každý ďalší odsúvať.

třídy se v CSS zapisují jinak
Keď tvorím pseudokód, nerozmýšľam nad syntaxou, ale riešeniami, ktoré sú dostupné. Po niekoľkých skúsenostiach veľmi neuznávam ozajstné kódy (keď tak v ukážke), lebo vždy na niečo zabudnem. Vendy si musela byť vedomá toho, že to nestačí okopírovať a že je to len príklad.

Vendy:
Názvy tried v CSS majú pred sebou bodku .. Ja som na ňu v kóde zabudol.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: