V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
est
V2EX  ›  HTML

想 vibe 一个日历 html 组件怎么都搞不好。。。

  •  
  •   est ·
    est · 12 小时 14 分钟前 · 738 次点击

    现在市面上绝大多数日历都是左右翻的。每页 一月

    但是 “月” 这个概念是人为的,自然日是连续的。

    以 2025-11-23 开始为例,能不能做成这种:

    23 24 25 26 27 28 29
    30 01 02 03 04 05 06
    

    然后垂直无限滚动?年月就放在背景展示

    想 vibe 一个但是感觉 AI 怎么都 get 不到我的点。。。

    下面是 prompt

    make an html5 calendar  demo

    • good looking, aethestic pleasing, but restrain with colors.
    • all-in-one html, no external deps. No react nor tailwind.
    • inline svg favicon with a calendar emoji
    • each month should be contained by an html element with class="month-group"
    • the calendar goes vertically, one week per line
    • no breaks between months, days should be displayed continuously, NO separation between months
    • Distinguish month by even-odd background color. The color applies from the first day of the month to the last, like a snake
    • watermark a big 1-12 month number in the background at the center of each month group. Prefix a smaller year before the month, only for January.
    • default land at the current day using browser's local clock
    • infinite scroll, can go backwards and forwards.
    • displayed as a compact block to be used as part of page elsewhere.

    https://lab.est.im/calendar/

    最后效果就只能这样了。这个 年-月 展示错位了。

    是我 prompt 不行,还是 AI 不太会写这种东西?

    7 条回复    2025-11-23 10:14:02 +08:00
    SenLief
        1
    SenLief  
       11 小时 54 分钟前   ❤️ 2
    我感觉是 ai 的问题,理解能力不太行。https://gemini.google.com/share/df5dd88e2441
    est
        2
    est  
    OP
       11 小时 50 分钟前
    @SenLief 效果挺好的。可以分享下 prompt 吗?

    能向过去无限滚动就更好了。。
    SenLief
        3
    SenLief  
       11 小时 44 分钟前
    @est 并没有很好的提示词,就是语义化的描述想要的效果,然后问答式修改几次,可以试试 gemini canva 。
    est
        4
    est  
    OP
       11 小时 42 分钟前
    @SenLief 我感觉是 grid 布局本身的问题。但是我本身对 grid 布局不太熟。我试了下 gemini canvas 感觉它特别喜欢 tailwind + grid 。。。
    SenLief
        5
    SenLief  
       11 小时 42 分钟前
    往前回滚几年并不难,只不过静态的 html5 ,内容一多响应也会有问题的。比如你让他回滚 5 年的。https://gemini.google.com/share/7451dc1da557
    SenLief
        6
    SenLief  
       11 小时 22 分钟前
    @est 因为容易一些,你可以指定让它用哪一种 css ,甚至可以不用也行。
    loading
        7
    loading  
       11 小时 10 分钟前
    good looking
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   2773 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 13:24 · PVG 21:24 · LAX 05:24 · JFK 08:24
    ♥ Do have faith in what you're doing.