Diskuze: Diář s časovým rozlišením

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

BuBu6

Člen

BuBu6:13.12.2019 15:20

Ahoj, prosím o radu. Potřeboval bych do kalendáře vykreslovat z databáze pomocí .php barevně časová pole a nevím jak na to. Umím jen to, že se mi podbarví buňka celého dne, ale potřebuji, aby se mi vykreslila i podle času. Třeba když mi událost začíná až ve 12 hod a trvá do 18 hod, aby se mi vybarvil jen část dne (viz obrázek) a ne celá buňka. Vůbec nevím, jak na to. Děkuji za případné rady.

Zkusil jsem: Nezkoušel jsem nic, protože vůbec nevím, jak na to. Rozvrhnout si každý den do 96 buněk (24 hod po 1/4 hodinách) mi připadá strašné.

Chci docílit: Snažím se dosáhnout svého týdenního diáře s časovým zvýrazněním. Každé zvýraznění by mělo ještě fungovat jako odkaz na jednotlivé akce.

Odpovědět

13.12.2019 15:20

Lukáš Křehula

Tvůrce

Lukáš Křehula:16.12.2019 11:23

Jdi na to matematicky.
Vytvoř si do buňky konkrétního dne prvek <a> s odkazem na akci.
Buňka bude muset být samozřejmě relativní, odkazu nastavíš absolutní pozici.
Výška bude přes celou buňku, takže 100%.
Když víš, že buňka celého dne má šířku 100% a den má 24 hodin, o kolik % doleva musíš odkaz v buňce posunut, když akce začíná ve 12 hodin? Když končí v 18 hodin, z toho ti vychází, že akce trvá celkem 6 hodin. Tím pádem, jakou šířku musíš odkazu nastavit (kolik procent je 6 hodin z 24h)?
A takhle pořád dokola..

Nahoru Odpovědět

16.12.2019 11:23

Roman

Člen

Roman:16.12.2019 14:52

Kratky priklad v JS. V php to bude akorat jine v tom ze vygenerujes data na strane serveru. Jinak vypocet je stejny.

<html>
    <head>
        <style>
            #day{
                width: 300px;
                height: 30px;
                border: 1px solid green;
            }
            #task {
                display: block;
                position: relative;
                height: 30px;
                background-color: brown;
            }
        </style>
    </head>
    <body>
        <div>
            <div id="day"><a id="task" href="#"></a></div>
        </div>
        <script>
                var task = document.getElementById("task");
                var pomer = 300 / 1440;    // pevna velikost v pixelech / pocet minut na den
                var delkaUdalosti = 60;   // delka udalosti v minutach
                var startUdalosti = 11*60; // start udalosti v minutach od pocatku dne

                task.style.width = delkaUdalosti * pomer;
                task.style.left = startUdalosti * pomer;
        </script>
    </body>
</html>

Nahoru Odpovědět

16.12.2019 14:52

Peter Mlich

Člen

Peter Mlich:16.12.2019 20:41

Muze cely kalendar generovat pres js

Jak pise Lukas. Do bunky bych zapsal policko s vyskou 100% a s css position a z-indexem. Tabulka je pruhledna, takze pri spravnem z-indexu (pozadi, tabulky, policka a divu s casem) se to vykresli na pozadi.

Nahoru Odpovědět

16.12.2019 20:41

BuBu6

Člen

BuBu6:16.12.2019 21:56

Nějakým takovým směrem jsem přemýšlel, že by se to dalo vyřešit (pozicováním), takže to vyzkouším. Nevím tedy, jak to bude vypadat v dalším okně, resp. nedělí mi končí jedno okno, v pondělí mi pak začíná nové, chtěl bych to mít zobrazené po týdnu. Nejsem zrovna programovací přeborník a v .js už vůbec, tak se mi to snad zadaří.
Díky zatím za rady a jdu to koumat.

Nahoru Odpovědět

16.12.2019 21:56

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.

Nejčastěji vyhledáváné

Diskuze: Diář s časovým rozlišením