Gregory v0.3.0 Demo Příručka API GitHub

Konfigurátor

Přepni volby vlevo a picker se okamžitě přestaví. Dole je kód, který takový picker vyrobí.

Volby

Události

    Picker

    —

    Kód

    
            
          
    

          
    
            
    Vzhled — CSS proměnné
    
            
    Šířku panelu určuje velikost políčka dne. Prázdné místo
              okolo číslice není odsazení — políčko žádné nemá — ale poměr velikosti písma
              k políčku. Všechny hodnoty jsou v pixelech.
    

            
    
              
    

              
    
                

                

                

                

                

                

                

                
              
    
            
    
          
    
        
    
      
    
    
    

    
    
      
    Motivy
    
      
    Hotové motivy z @svatekr70/gregory/themes.css. Každý jen přenastavuje
        proměnné --gr-* — žádný selektor komponenty se nepřepisuje.
    

      
    
        
    
          
    
          
        
    
        
    
          
    
          
    
        
    
      
    
    
    

    
    
      
    Ukázky
    
      
    Typické konfigurace, které v projektech opravdu potřebuješ.
    

      
    

        
    
          
    Jedno datum
    
          
    Nejjednodušší případ. autoApply je v single režimu zapnutý, takže klik rovnou potvrzuje.
    
          
          
    —
    
        
    

        
    
          
    Rozsah s presety
    
          
    Postranní zkratky a tlačítka Použít / Zrušit. Výchozí chování pro mode: 'range'.
    
          
          
    —
    
        
    

        
    
          
    Datum a čas
    
          
    mode: 'datetime' s krokem 15 minut. Panel po výběru dne zůstane
            otevřený, aby šel nastavit čas; potvrzuje se tlačítkem. V patičce je
            místo Dnes odkaz Nyní — nastaví i aktuální čas.
    
          
          
    —
    
        
    

        
    
          
    Omezený výběr
    
          
    min dnes, max za 90 dní a maxSpan: 14. Zbytek kalendáře je nedostupný.
    
          
          
    —
    
        
    

        
    
          
    Svátky a víkendy
    
          
    isDisabled zakáže víkendy, dayClass obarví české státní svátky.
    
          
          
    —
    
        
    

        
    
          
    Vlastní presety a formát
    
          
    Fiskální čtvrtletí místo výchozích zkratek a vlastní format do inputu.
    
          
          
    —
    
        
    

        
    
          
    Výběr období
    
          
    mode: 'month', 'quarter' a 'year' — na filtry
            v přehledech, kde je denní kalendář zbytečný.
    
          
    
            
            
            
          
    
          
    —
    
        
    

        
    
          
    Více samostatných dnů
    
          
    mode: 'multiple' — klik den přidá, druhý klik ho zase odebere.
            Hodnota je pole dat, ne rozsah.
    
          
          
    —
    
        
    

        
    
          
    Značky u dnů
    
          
    dayBadge — pod číslo dne se vejde tečka nebo počet.
            Tady „kolik je ten den rezervací". Buňka je vyšší přes
            --gr-day-height, šířka kalendáře se tím nemění.
    
          
          
    —
    
        
    

        
    
          
    Vytížené dny
    
          
    Pod každým dnem počet naplánovaných hovorů, barva podle vytížení
            (dayBadge + dayClass). Řádek pro značku
            drží i dny bez ní, takže čísla sedí na jedné lince. Počty mají i dny
            přesahující ze sousedních měsíců, jen ztlumené — plánování přes
            přelom měsíce tak vidí, že prvního je už nabito.
    
          
          
    —
    
        
    

        
    
          
    Badge místo pole
    
          
    Picker umí viset na čemkoli, nejen na <input>. Klikni na
            odznak — hodnota se vypíše do [data-gr-value], aby ikona zůstala.
    
          
    
            
              📅 13. 8. 2026
            
          
    
          
    —
    
        
    

        
    
          
    Dvě pole: Od a Do
    
          
    endInput — klikni do kteréhokoli pole, vybírá se jeden rozsah
            a po potvrzení se rozdělí do obou.
    
          
    
            
            
          
    
          
    —
    
        
    

        
    
          
    Výběr týdne číslem
    
          
    weekSelection: 'number' — klikni na číslo týdne vlevo a vybere se
            celých sedm dní. Řídí se prvním dnem týdne podle locale.
    
          
          
    —
    
        
    

        
    
          
    Výběr týdne dnem
    
          
    weekSelection: 'day' — klikni na kterýkoli den a vybere se celý
            jeho týden. Týden pod kurzorem se předsvítí.
    
          
          
    —
    
        
    

        
    
          
    Otevřený rozsah
    
          
    allowOpenRange: true — stačí jeden konec. Vyber datum a dej
            Použít, nebo použij tlačítka Bez začátku / Bez konce.
    
          
          
    —
    
        
    

        
    
          
    Pracovní doba
    
          
    minTime: '08:00', maxTime: '18:00' a krok 30 minut.
            Selecty nabídnou jen hodiny 8–18, v osmnácté už jen :00.
    
          
          
    —
    
        
    

        
    
          
    Vlastní motiv
    
          
    Jen přenastavené CSS proměnné na obalu — žádný přepsaný selektor.
    
          
    
        
    

        
    
          
    Custom element
    
          
    Bez řádku JS. Hodnota se zrcadlí do atributu value.
    
          
          
    —