Ma'lumot · compound

Kalendar körinişi

Hodisalarni vaqt öqida körsatadi: Oy (kun katagida hodisa chiplari va «+N» — bosilsa hammasi oçiladi), Hafta va Kun (soatlar töri, kun böyi qatori, bugungi ustunda «hozir» çiziği vaqt yozuvi bilan, bir-biriga tuşgan hodisalar yonma-yon). Hodisa — tugma: nomi va vaqti matnda, rang faqat toifa çiziği. Sana tanlaş uçun .fx-calendar işlating — bu komponent hodisalarni körsatadi. Xulq foxui.js'da (data-fx-schedule). Tahrirlaş (data-editable, 20.10 — heroui.pro Agenda'dan): siçqonça bilan suriş (data-step daqiqa qadam, boşqa kunga ham), pastki çetidan çöziş, böş joyda sudrab yangi hodisa (data-draft); klaviatura — Alt+strelkalar; har amal fx-schedule-move/-resize/-create hodisasi {id, day, start, end}, ekran öquvçiga aytiladi. data-readonly — surilmaydi; data-status="unconfirmed" — uzuq çegara (taxminiy); data-weekend — dam oliş kuni foni. Barmoq bilan sudraş yöq (aylantiriş buzilmasin).

beta0.24.0 danyangilandi 0.57.0.fx-scheduleCSS + JS
Du12
Se13
Çor14
Pay15
Ju16
Sha17
Yak18
Kun böyi
DuSeÇorPayJuShaYak
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1

Variantlar

AtributQiymatlarStandart
data-viewweek
day bitta ustun
month oy töri		week
data-tonebrand
blue
green
coral
purple
yellow
pink		brand
data-editabletrue suriş, çöziş, yaratiş (siçqonça va klaviatura)—
data-statusunconfirmedconfirmed

Anatomiya

  1. root.fx-scheduleşart
  2. head.fx-schedule__headixtiyoriy
  3. day-header.fx-schedule__dhixtiyoriy
  4. dow.fx-schedule__dowixtiyoriy
  5. day-number.fx-schedule__dnumixtiyoriy
  6. allday.fx-schedule__alldayixtiyoriy
  7. allday-cell.fx-schedule__cellixtiyoriy
  8. body.fx-schedule__bodyixtiyoriy
  9. hours.fx-schedule__hoursixtiyoriy
  10. column.fx-schedule__colixtiyoriy
  11. event.fx-schedule__evixtiyoriy
  12. time.fx-schedule__timeixtiyoriy
  13. title.fx-schedule__titleixtiyoriy
  14. now.fx-schedule__nowixtiyoriy
  15. chip.fx-schedule__chipixtiyoriy
  16. month.fx-schedule__monthixtiyoriy
  17. day.fx-schedule__dayixtiyoriy
  18. number.fx-schedule__numixtiyoriy
  19. more.fx-schedule__moreixtiyoriy
  20. resize.fx-schedule__resizeixtiyoriy

Holatlar

todayoutsidehoverfocusexpandeddraggingdraftreadonlyweekend

Klaviatura va kiriş

TugmaAmal
TabKeyingi hodisa yoki «+N» tugmasi
Enter, Boʻsh joyHodisani oçadi (sahifa xulqi); «+N» — qolganini körsatadi / yiğadi
Alt + ↑ / ↓Tahrirlanadigan kalendarda hodisani qadam (data-step, 15 daqiqa) bilan suradi
Alt + ← / →Hodisani oldingi / keyingi kunga köçiradi
Alt + Shift + ↑ / ↓Hodisani qisqartiradi / çözadi

Hafta/kun: sarlavha va ustunlar vizual tör; bugungi kunda aria-current="date". Oy: har kun katagi role="group" + aria-label (sana). Hodisa — <button> (nom + vaqt matnda). «+N» tugmasi aria-expanded va aria-label («Yana N ta hodisani körsatiş»). «Hozir» çiziği dekorativ (role="presentation"). Agenda röyxati muqobili tavsiya etiladi.

Naqş: WAI-ARIA APG button · rol group

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Uçraşuv, vazifa va muddatlarni haftalik/oylik köriş (reja, band qiliş, jamoa taqvimi).
Işlatmang
  • Faqat sana tanlaş → calendar
  • Loyiha bosqiçlari va boğliqliklar → gantt
  • Faoliyat yoki voqealar lentasi → timeline
  • Hodisa toifasini faqat rang bilan bermang — har doim nom va vaqt matnda bölsin.
  • Oy katagiga 3–4 tadan köp chip siğdirmang — data-max va «+N» işlating.
  • Soatlar törini 24 soatga çözmang — --fx-schedule-start va --fx-schedule-hours bilan iş vaqtini körsating.
  • Mobil ekranda 7 kunlik soatlar törini majburlamang — kun körinişi yoki agenda röyxatiga öting.
npx foxui add schedule
<section class="fx-schedule" data-view="week" data-fx-schedule data-editable data-now="14:20" aria-label="12–18 oktyabr haftasi">
  <div class="fx-schedule__head" role="row">
    <span class="fx-schedule__corner"></span>
    <div class="fx-schedule__dh"><span>Du</span><span class="fx-schedule__dnum">12</span></div>
    <div class="fx-schedule__dh"><span>Se</span><span class="fx-schedule__dnum">13</span></div>
    <div class="fx-schedule__dh"><span>Çor</span><span class="fx-schedule__dnum">14</span></div>
    <div class="fx-schedule__dh"><span>Pay</span><span class="fx-schedule__dnum">15</span></div>
    <div class="fx-schedule__dh"><span>Ju</span><span class="fx-schedule__dnum">16</span></div>
    <div class="fx-schedule__dh" data-today aria-current="date"><span>Sha</span><span class="fx-schedule__dnum">17</span></div>
    <div class="fx-schedule__dh" data-weekend><span>Yak</span><span class="fx-schedule__dnum">18</span></div>
  </div>
  <div class="fx-schedule__allday">
    <span class="fx-schedule__label">Kun böyi</span>
    <div class="fx-schedule__cell"></div><div class="fx-schedule__cell"></div><div class="fx-schedule__cell"></div>
    <div class="fx-schedule__cell"><button type="button" class="fx-schedule__chip" data-tone="coral">Hisobot topşiriş muddati</button></div>
    <div class="fx-schedule__cell"></div>
    <div class="fx-schedule__cell"><button type="button" class="fx-schedule__chip" data-tone="green">Ustozlar kuni</button></div>
    <div class="fx-schedule__cell"></div>
  </div>
  <div class="fx-schedule__body">
    <div class="fx-schedule__hours" aria-hidden="true"><span>08:00</span><span>09:00</span><span>10:00</span><span>11:00</span><span>12:00</span><span>13:00</span><span>14:00</span><span>15:00</span><span>16:00</span><span>17:00</span></div>
    <div class="fx-schedule__col"><button type="button" class="fx-schedule__ev" data-tone="blue" style="--from: 9; --span: 1"><span class="fx-schedule__time">09:00–10:00</span><span class="fx-schedule__title">Haftalik yiğiliş</span></button><button type="button" class="fx-schedule__ev" data-tone="green" style="--from: 14; --span: 2"><span class="fx-schedule__time">14:00–16:00</span><span class="fx-schedule__title">Mijoz bilan qönğiroq</span></button></div>
    <div class="fx-schedule__col"><button type="button" class="fx-schedule__ev" data-tone="brand" style="--from: 10; --span: 1.5"><span class="fx-schedule__time">10:00–11:30</span><span class="fx-schedule__title">Dizayn tekşiruvi</span></button><button type="button" class="fx-schedule__ev" data-tone="purple" style="--from: 10.5; --span: 1"><span class="fx-schedule__time">10:30–11:30</span><span class="fx-schedule__title">Tezkor savol-javob</span></button></div>
    <div class="fx-schedule__col"><button type="button" class="fx-schedule__ev" data-tone="coral" style="--from: 11; --span: 2"><span class="fx-schedule__time">11:00–13:00</span><span class="fx-schedule__title">Taqdimot tayyorlaş</span></button></div>
    <div class="fx-schedule__col"><button type="button" class="fx-schedule__ev" data-tone="blue" style="--from: 9; --span: 1"><span class="fx-schedule__time">09:00–10:00</span><span class="fx-schedule__title">Kunlik yiğiliş</span></button><button type="button" class="fx-schedule__ev" data-tone="yellow" style="--from: 15; --span: 1.5"><span class="fx-schedule__time">15:00–16:30</span><span class="fx-schedule__title">Şartnoma muhokamasi</span></button></div>
    <div class="fx-schedule__col"><button type="button" class="fx-schedule__ev" data-tone="pink" style="--from: 13; --span: 3"><span class="fx-schedule__time">13:00–16:00</span><span class="fx-schedule__title">Mahsulot sinovi</span></button></div>
    <div class="fx-schedule__col" data-today><button type="button" class="fx-schedule__ev" data-tone="green" style="--from: 10; --span: 2"><span class="fx-schedule__time">10:00–12:00</span><span class="fx-schedule__title">Jamoaviy nonuşta</span></button></div>
    <div class="fx-schedule__col" data-weekend><button type="button" class="fx-schedule__ev" data-tone="purple" data-status="unconfirmed" style="--from: 11; --span: 1.5"><span class="fx-schedule__time">11:00–12:30</span><span class="fx-schedule__title">Oilaviy sayr (taxminiy)</span></button><button type="button" class="fx-schedule__ev" data-tone="coral" data-readonly style="--from: 15; --span: 1"><span class="fx-schedule__time">15:00–16:00</span><span class="fx-schedule__title">Bayram (özgarmaydi)</span></button></div>
  </div>
</section>

<!-- Oy koʻrinishi: bir kunda 3 tadan koʻp hodisa — «+N» -->
<section class="fx-schedule" data-view="month" data-max="3" data-fx-schedule aria-label="Oktyabr 2026">
  <div class="fx-schedule__head"><span class="fx-schedule__dow">Du</span><span class="fx-schedule__dow">Se</span><span class="fx-schedule__dow">Çor</span><span class="fx-schedule__dow">Pay</span><span class="fx-schedule__dow">Ju</span><span class="fx-schedule__dow">Sha</span><span class="fx-schedule__dow">Yak</span></div>
  <div class="fx-schedule__month">
    <div class="fx-schedule__day" data-outside role="group" aria-label="28-sentyabr"><span class="fx-schedule__num">28</span></div>
    <div class="fx-schedule__day" data-outside role="group" aria-label="29-sentyabr"><span class="fx-schedule__num">29</span></div>
    <div class="fx-schedule__day" data-outside role="group" aria-label="30-sentyabr"><span class="fx-schedule__num">30</span></div>
    <div class="fx-schedule__day" role="group" aria-label="1-oktyabr"><span class="fx-schedule__num">1</span></div>
    <div class="fx-schedule__day" role="group" aria-label="2-oktyabr"><span class="fx-schedule__num">2</span></div>
    <div class="fx-schedule__day" role="group" aria-label="3-oktyabr"><span class="fx-schedule__num">3</span></div>
    <div class="fx-schedule__day" role="group" aria-label="4-oktyabr"><span class="fx-schedule__num">4</span></div>
    <div class="fx-schedule__day" role="group" aria-label="5-oktyabr"><span class="fx-schedule__num">5</span><button type="button" class="fx-schedule__chip" data-tone="blue">Yiğiliş</button></div>
    <div class="fx-schedule__day" role="group" aria-label="6-oktyabr"><span class="fx-schedule__num">6</span></div>
    <div class="fx-schedule__day" role="group" aria-label="7-oktyabr"><span class="fx-schedule__num">7</span></div>
    <div class="fx-schedule__day" role="group" aria-label="8-oktyabr"><span class="fx-schedule__num">8</span><button type="button" class="fx-schedule__chip" data-tone="brand">Rejalaştiriş</button><button type="button" class="fx-schedule__chip" data-tone="green">Mijoz tuşligi</button></div>
    <div class="fx-schedule__day" role="group" aria-label="9-oktyabr"><span class="fx-schedule__num">9</span></div>
    <div class="fx-schedule__day" role="group" aria-label="10-oktyabr"><span class="fx-schedule__num">10</span></div>
    <div class="fx-schedule__day" role="group" aria-label="11-oktyabr"><span class="fx-schedule__num">11</span></div>
    <div class="fx-schedule__day" role="group" aria-label="12-oktyabr"><span class="fx-schedule__num">12</span></div>
    <div class="fx-schedule__day" role="group" aria-label="13-oktyabr"><span class="fx-schedule__num">13</span></div>
    <div class="fx-schedule__day" role="group" aria-label="14-oktyabr"><span class="fx-schedule__num">14</span><button type="button" class="fx-schedule__chip" data-tone="coral">Dizayn tekşiruvi</button><button type="button" class="fx-schedule__chip" data-tone="purple">Sprint boşi</button><button type="button" class="fx-schedule__chip" data-tone="blue">Intervyu</button><button type="button" class="fx-schedule__chip" data-tone="yellow">Hisob-kitob</button><button type="button" class="fx-schedule__chip" data-tone="pink">Sörovnoma</button></div>
    <div class="fx-schedule__day" role="group" aria-label="15-oktyabr"><span class="fx-schedule__num">15</span></div>
    <div class="fx-schedule__day" role="group" aria-label="16-oktyabr"><span class="fx-schedule__num">16</span></div>
    <div class="fx-schedule__day" data-today role="group" aria-label="17-oktyabr"><span class="fx-schedule__num">17</span><button type="button" class="fx-schedule__chip" data-tone="green">Ustozlar kuni</button></div>
    <div class="fx-schedule__day" role="group" aria-label="18-oktyabr"><span class="fx-schedule__num">18</span></div>
    <div class="fx-schedule__day" role="group" aria-label="19-oktyabr"><span class="fx-schedule__num">19</span></div>
    <div class="fx-schedule__day" role="group" aria-label="20-oktyabr"><span class="fx-schedule__num">20</span></div>
    <div class="fx-schedule__day" role="group" aria-label="21-oktyabr"><span class="fx-schedule__num">21</span><button type="button" class="fx-schedule__chip" data-tone="brand">Taqdimot</button><button type="button" class="fx-schedule__chip" data-tone="coral">Şartnoma</button></div>
    <div class="fx-schedule__day" role="group" aria-label="22-oktyabr"><span class="fx-schedule__num">22</span></div>
    <div class="fx-schedule__day" role="group" aria-label="23-oktyabr"><span class="fx-schedule__num">23</span></div>
    <div class="fx-schedule__day" role="group" aria-label="24-oktyabr"><span class="fx-schedule__num">24</span></div>
    <div class="fx-schedule__day" role="group" aria-label="25-oktyabr"><span class="fx-schedule__num">25</span></div>
    <div class="fx-schedule__day" role="group" aria-label="26-oktyabr"><span class="fx-schedule__num">26</span></div>
    <div class="fx-schedule__day" role="group" aria-label="27-oktyabr"><span class="fx-schedule__num">27</span></div>
    <div class="fx-schedule__day" role="group" aria-label="28-oktyabr"><span class="fx-schedule__num">28</span></div>
    <div class="fx-schedule__day" role="group" aria-label="29-oktyabr"><span class="fx-schedule__num">29</span><button type="button" class="fx-schedule__chip" data-tone="purple">Reliz</button></div>
    <div class="fx-schedule__day" role="group" aria-label="30-oktyabr"><span class="fx-schedule__num">30</span></div>
    <div class="fx-schedule__day" role="group" aria-label="31-oktyabr"><span class="fx-schedule__num">31</span></div>
    <div class="fx-schedule__day" data-outside role="group" aria-label="1-noyabr"><span class="fx-schedule__num">1</span></div>
  </div>
</section>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-category-blue --fx-bg-category-blue-subtle --fx-bg-category-coral --fx-bg-category-coral-subtle --fx-bg-category-green --fx-bg-category-green-subtle --fx-bg-category-pink --fx-bg-category-pink-subtle --fx-bg-category-purple --fx-bg-category-purple-subtle --fx-bg-category-yellow --fx-bg-category-yellow-subtle --fx-bg-error-solid --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-radius-pill --fx-radius-surface --fx-schedule-days --fx-schedule-hours --fx-schedule-start --fx-shadow-lg --fx-size-icon-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-4 --fx-text-disabled --fx-text-on-brand --fx-text-on-error --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)