IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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

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

Aktivity
Avatar
BuBu6
Člen
Avatar
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
Avatar
Lukáš Křehula
Tvůrce
Avatar
Odpovídá na BuBu6
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
Avatar
Roman
Člen
Avatar
Odpovídá na BuBu6
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
Avatar
Peter Mlich
Člen
Avatar
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
Avatar
BuBu6
Člen
Avatar
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.