Activities Calendar

การ์ดปฏิทินกิจกรรมสไตล์ widget2 — รูปกิจกรรม ป้ายแจ้งเตือน "เร็วๆ นี้" ชื่อกิจกรรม วันที่ และคำอธิบายย่อ 2 บรรทัด พร้อมปุ่มวงกลมไปหน้าปฏิทิน มีแบบเต็มความกว้าง (รูปซ้าย/รายละเอียดขวา) และแบบครึ่งคอลัมน์ (รายละเอียดซ้อนบนรูป)

Set widget2Category investor-servicesScope .stk-w2-activities-calendar

Examples

แต่ละหัวข้อคือ UI คนละรูปแบบ ส่วนขนาดคอลัมน์เป็น layout ของรูปแบบเดียวกัน

รูปแบบมาตรฐาน

UI รูปแบบเดียวกัน มี 2 layout ให้เลือก

2 layouts

Layout

PreviewOpen

col12เต็มความกว้าง (รูปซ้าย / รายละเอียดขวา)Grid 12/12 · Measuring UI… · JavaScript

Composition

โครงสร้างส่วนประกอบหลักที่สรุปจาก HTML ของแต่ละ variant โดยตัด layout wrappers ออก

Variant

Loading composition…

Content Schema

อ่าน schema เต็มและตัวอย่างค่าจาก get_widget ฟิลด์หลัก:

title
event_image
badge_label
event_title
event_date
event_description
cta_link

Asset URLs

CSS: https://stackui-cdn.intern-studio.com/widgets/widget2/activities-calendar/activities-calendar.css
JS:  https://stackui-cdn.intern-studio.com/widgets/widget2/activities-calendar/activities-calendar.js
Preview: https://stackui-cdn.intern-studio.com/widgets/widget2/activities-calendar/preview.html
Vendor: ดู dependencies.vendor จาก get_widget

ใช้ get_core ก่อนหนึ่งครั้ง จากนั้นเรียก get_widget โดยส่ง id="activities-calendar" และ set="widget2" เพื่อรับ HTML, CSS, JavaScript, dependencies และ URL ของ asset ที่ตรงกับ environment