2023年6月8日 16:39:24go评论76阅读模式

英文:

Showing holiday events on fullcalendar v3 as in easemytrip mobile view calendar

问题

您正在使用fullcalendar v3进行项目开发。您想要在日历上显示假期，就像附带的图像中标记的红色方框所示。

它应该显示如下：

在顶部 - 它将显示每个月的总假期数。
它应该像徽章一样标有1、2、3的日期，表示每个月的假期。
在每个月底部，应该描述每个月的徽章及其假期名称。

英文:

        $(document).ready(function () {

            $(&#39;#calendar&#39;).fullCalendar({
                header: {
                    left: &#39;today&#39;,//&#39;month,basicWeek,basicDay&#39;,
                    center: &#39;title&#39;,
                    right: &#39;prev,next&#39;
                },
                views: {
                    month: { // name of view
                        titleFormat: &#39;MMM YYYY&#39;
                        // other view-specific options here
                    }
                },
                buttonText: {
                    today: &#39;Today&#39;,
                },
                defaultDate: &#39;2023-06-09&#39;,
                fixedWeekCount: false,
                showNonCurrentDates: false,

                navLinks: false, // can click day/week names to navigate views
                editable: false,
                eventLimit: false, // allow &quot;more&quot; link when too many events
                selectable: true,
                selectHelper: true,
                dayClick: function (date) {
                    alert(date.format() + &quot;\n&quot; + calEvent.title);
                },
                eventClick: function(calEvent) {
                        alert(calEvent.title);
                },
                eventSources: [
                    // your event source
                    //&#39;/feed1.php&#39;,
                    //&#39;/feed2.php&#39;,
                    {
                        events: [
                            {
                                title: &#39;FULL&#39;,
                                start: &#39;2023-06-11&#39;,

                            },
                            //for holidays
                            {
                                title: &#39;1&#39;,
                                start: &#39;2023-06-11&#39;,
                                color: &#39;#FFE3A2&#39;,
                                textColor: &#39;#000&#39;,
                                className: &#39;circle_dot&#39;
                            },
                            {
                                title: &#39;AVAILABLE&#39;,
                                start: &#39;2023-06-12&#39;,
                                color: &#39;#257e4a&#39;,
                                textColor: &#39;#ffffff&#39;,

                            },
                            //for holidays
                            {
                                title: &#39;2&#39;,
                                start: &#39;2023-06-12&#39;,
                                color: &#39;#FFE3A2&#39;,
                                textColor: &#39;#000&#39;,
                                className: &#39;circle_dot&#39;
                            },
                            {
                                title: &#39;FULL&#39;,
                                start: &#39;2023-06-23&#39;,
                                color: &#39;#e66d1d&#39;
                            },
                            {
                                title: &#39;AVAILABLE&#39;,
                                start: &#39;2023-06-28&#39;,
                            }
                        ],
                        color: &#39;black&#39;,     // an universal option!
                        textColor: &#39;yellow&#39;, // an universal option!
                        className: &#39;text-center&#39;
                    }
                ]
            });

        });

       .circle_dot {
            font-size: 9px;
            width: 12px;
            height: 12px;
            background: #FFE3A2;
            border-radius: 50%;
            color: #000;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            position: absolute;
            top: 0px;
            opacity: 1;
        }

&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css&quot; rel=&quot;stylesheet&quot;/&gt;

&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js&quot;&gt;&lt;/script&gt;


&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;

I am using fullcalendar v3 in my project. I want to show holidays on the calendar, as shown on attached image marked in red square box.

It should show following as:

on the top - it will show total holidays of each month
it should number 1,2,3 like badge on dates which has holidays for each month
at the bottom of the month it should describe the badge with the holiday name for each month

答案1

得分: 0

After a lot of research I found an event - eventAfterAllRender and wrote a function to achieve my task

eventAfterAllRender: function (view) {
    $('.holidaycount').html('').hide();
    $('#holidays-list').html('');

    var loop = 0;
    $('.circle_dot').each(function () {
        loop++;
        $('#holidays-list').append("<p class=\"holidayName\"> <span class=\"holidayNo\">" + loop + "</span>" + $(this).find('.fc-title').text() + "</p>");
        $(this).find('.fc-title').text(loop);
        $('.holidaycount').show();
    });
    $('.holidaycount').html(loop + ' Holidays');
},
eventSources: [
    '/home/getcalendar?bid=test',
    '/home/getholidays',
]

<p class="holidaycount"></p> - This line is above calendar month

<div id="holidays-list"></div> - this line is below calendar month

英文:

After a lot of research I found an event - eventAfterAllRender and wrote a function to achieve my task

                eventAfterAllRender: function (view) {
                    $(&#39;.holidaycount&#39;).html(&#39;&#39;).hide();
                    $(&#39;#holidays-list&#39;).html(&#39;&#39;);

                    var loop = 0;
                    $(&#39;.circle_dot&#39;).each(function () {
                        loop++;
                        $(&#39;#holidays-list&#39;).append(&quot;&lt;p class=\&quot;holidayName\&quot;&gt; &lt;span class=\&quot;holidayNo\&quot;&gt;&quot; + loop + &quot;&lt;/span&gt;&quot; + $(this).find(&#39;.fc-title&#39;).text() + &quot;&lt;/p&gt;&quot;);
                        $(this).find(&#39;.fc-title&#39;).text(loop);
                        $(&#39;.holidaycount&#39;).show();
                    });
                    $(&#39;.holidaycount&#39;).html(loop + &#39; Holidays&#39;);
                },
                eventSources: [
                    &#39;/home/getcalendar?bid=test&#39;,
                    &#39;/home/getholidays&#39;,
                ]

&lt;p class=&quot;holidaycount&quot;&gt;&lt;/p&gt; - This line is above calendar month

&lt;div id=&quot;holidays-list&quot;&gt;&lt;/div&gt; - this line is below calendar month

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在fullcalendar v3上显示节假日活动，就像easemytrip移动视图日历中一样。

问题

答案1

如何在React.js中使用React Router DOM导航到相同组件并传递不同的数据？

Web workers能够由浏览器在任何时候重新启动吗？

Angular是否可以将图表发送到后端

Go语言构建器/任务运行器

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论