Projektowanie dynamicznego, responsywnego kalendarza tygodniowego

Question

Tworzę dynamiczny, elastyczny kalendarz tygodniowy, używając Twitter Bootstrap.

Oto moja aktualna realizacja: http://jsfiddle.net/dvirazulay/Lhe7C/ (było trochę długo, aby wkleić tu w całości)

A oto aktualny zrzut ekranu z nim:

Co Próbuję osiągnąć to projekt, który będzie w pełni dynamiczny - generowanie początkowego widoku z mojego back-endu nie jest problemem, ale jest nieco skomplikowane, ponieważ moja obecna implementacja używa tabel. Obawiam się, że trudno będzie go utrzymać po stronie JavaScriptu, czyli usuwaniu zdarzeń/dodawaniu ich w locie.

Oczywiście wybrałem stoły, ponieważ ma to dla mnie sens - kalendarz tygodniowy to w zasadzie stolik. Opiszę mój projekt:

1. Zdarzenie może obejmować więcej niż 30 minut, więc używam rowspan aby określić, ile godzin powinno obejmować dalej.
2. Możliwe są dwa sprzeczne zdarzenia (nie zezwalam na więcej niż dwa). W chwili obecnej są one wyświetlane obok siebie, a każda z nich zajmuje 50% szerokości zdarzenia i przyjmuje tyle, ile potrzeba do przedstawienia czasu zakończenia.
3. Na stronie back-end, obliczyć ile td muszę przejść, aby nie mieć dodatkowe kolumny na końcu tabeli (jak rowspan popycha niektórych do prawej)

Moje pytania są następujące:

• Czy to właściwe podejście?
• Czy należy zastosować tę samą logikę zaplecza do interfejsu użytkownika i ponownie obliczyć wartość tr/td, aby wyświetlić w zależności od liczby zdarzeń, które mam, lub czy istnieje lepsze rozwiązanie?

Najlepiej, jeśli dobra odpowiedź powinna opisywać obsługę zdarzeń na stronie frontowej bez komplikacji lub alternatywnego (responsywnego!) Projektu dla tego problemu.

Nie chcę używać istniejącej wtyczki, ponieważ wyszukiwałam i wypróbowywałam wiele z nich, i chcę zachować naprawdę małą wagę, ale jeśli masz świetną propozycję dla takiej, która spełnia wymagania - ja chciałbym to sprawdzić! (jQuery tydzień kalendarzowy jest zbyt wolny i zagracony na przykład)

Uwaga: Nie mam zamiaru obsługiwać przeglądarek starszych niż IE9.

Answer 1

Po zbadaniu problemów i konsultacjach z kilkoma ekspertami front-end, mam do wniosku, że utrzymanie go w tabelach jest najlepszym rozwiązaniem, nawet jeśli go nie generując jest trywialne.

Chociaż decyzja ta sprawia, że ​​trudno się dynamicznie zmieniać harmonogram bez ponownego generowania całą tabelę, korzyści z elementami stylizacji że powinny być stół jako stół zapłacić - wyrównywanie szerokości, wysokości, granice itp są łatwe do kontrolowania i działają świetnie w różnych przeglądarkach.

Ważne jest to, że takie podejście sprawia, że ​​czas reakcji harmonogramu jest banalny.

Answer 2

Jest to całkowicie dopuszczalny sposób robienia tego.

Gdybym był tobą, prawdopodobnie użyłbym div, ponieważ są one łatwiejsze w obsłudze i łatwiejsze w użyciu CSS i są bardziej standardowe.

Poza tym uważam, że podejmujesz dobre podejście i prawdopodobnie powinieneś wykonać przód tak samo, jak tył, ponieważ wiesz, że to działa.

Jeśli chodzi o obsługę zdarzeń, po prostu sortowałbym divy według typów za pomocą klas, a następnie używałam programów obsługi zdarzeń z typami zdarzeń, których chcesz użyć (nie wiem, czego chciałbyś oprócz kliknięcia) na odpowiednich klasy.

Answer 3

Używanie stołu to dobre podejście.

Ok, jest to rozwiązanie oparte na jQuery do problemu "rowspans is pushed right". Źródłem problemu jest nieprawidłowe generowanie tabel w zapleczu.

Na przykład, jeśli renderowany jest td z rowspan = "3", wówczas td na tej samej pozycji indeksu kolumny w następnych dwóch wierszach zostanie zmienione i przesunięte w prawo. Jest to niepożądane.

<table border="1"> 
<tr> 
    <td>07:30</td> 
    <td rowspan="3">Event 07:30 to 09:00</td> 
</tr> 
<tr> 
    <td>08:00</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>08:30</td> 
    <td>Should not be rendered.</td> 
</tr> 
<tr> 
    <td>09:00</td> 
    <td>C</td> 
</tr> 

Prawidłowe rozwiązanie jest prawidłowe wytwarzanie Tabela w backend. Renderowanie td po rzędzie po prostu nie powinno się zdarzyć. Jeśli wiesz, że renderujesz obszar wierszy = "3", to odpowiednio postępuj. :)

W każdym razie, jeśli nie jest to możliwe, aby zmodyfikować rendering stół, a następnie użyć jQuery go naprawić:

http://jsfiddle.net/9tQvu/3/

Answer 4

co się dzieje, gdy zdarzenie jest nakładających się tylko częściowo z innym, to znaczy, 2 nakładające się wydarzenia zajmują 50% wartości dowcipu, ale jeśli jedno z nich zakończy się wcześniej, a drugie później, kontynuujące, czy zajmuje całą szerokość "następnego" wiersza, czy kontynuuje na poziomie 50% szerokości? co się stanie, jeśli wydarzenie A będzie trwało od 8:00 do 8:30, a wydarzenie B - od 8:00 do 18:00? powinno być fajnie, że wydarzenie B wypełni całą szerokość, dopóki nie pojawi się inne nakładające się zdarzenie ... ale wydaje mi się, że może to być trochę trudne. tylko myśl. Szczęśliwe kodowanie, to naprawdę fajny projekt.

Answer 5

dhtmlxScheduler - Ajax/JavaScript Kalendarium

dhtmlxScheduler jest kalendarz zdarzeń JavaScript, który pozwala na dodanie do Google jak planującego na swojej stronie internetowej lub aplikacji. Intuicyjny interfejs "przeciągnij i upuść" umożliwia użytkownikom końcowym szybkie zarządzanie zdarzeniami i spotkaniami w różnych widokach: Dzień, Tydzień, Miesiąc, Rok, Agenda, Oś czasu itp. Bardzo lekki (około 20Kb spakowany gzipem), wysoce konfigurowalny i szybki, dhtmlxScheduler zapewnia szybki sposób dodawania kalendarza wydarzeń opartych na Ajax na stronie internetowej.

Answer 6

Korzystanie z CSS i DIV, zamiast komórek tabeli, może być bardziej precyzyjna i na pewno będzie łatwiej obliczyć po stronie klienta i zachować zdolność reagowania.Oto przykład pseduo-CSS/JS dla pierwszego zdarzenia:

.event:first-child { 
    height: `(1.5/24)*100`%; /* 6.25%, based on duration */ 
    position: absolute; 
    top: `(10/24)*100`%; /* 41.7%, based on event start */ 
}