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

huangapple
go评论99阅读模式
英文:

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

问题

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

它应该显示如下：

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.         $(document).ready(function () {
  3.             $(&#39;#calendar&#39;).fullCalendar({
  4.                 header: {
  5.                     left: &#39;today&#39;,//&#39;month,basicWeek,basicDay&#39;,
  6.                     center: &#39;title&#39;,
  7.                     right: &#39;prev,next&#39;
  8.                 },
  9.                 views: {
  10.                     month: { // name of view
  11.                         titleFormat: &#39;MMM YYYY&#39;
  12.                         // other view-specific options here
  13.                     }
  14.                 },
  15.                 buttonText: {
  16.                     today: &#39;Today&#39;,
  17.                 },
  18.                 defaultDate: &#39;2023-06-09&#39;,
  19.                 fixedWeekCount: false,
  20.                 showNonCurrentDates: false,
  22.                 navLinks: false, // can click day/week names to navigate views
  23.                 editable: false,
  24.                 eventLimit: false, // allow &quot;more&quot; link when too many events
  25.                 selectable: true,
  26.                 selectHelper: true,
  27.                 dayClick: function (date) {
  28.                     alert(date.format() + &quot;\n&quot; + calEvent.title);
  29.                 },
  30.                 eventClick: function(calEvent) {
  31.                         alert(calEvent.title);
  32.                 },
  33.                 eventSources: [
  34.                     // your event source
  35.                     //&#39;/feed1.php&#39;,
  36.                     //&#39;/feed2.php&#39;,
  37.                     {
  38.                         events: [
  39.                             {
  40.                                 title: &#39;FULL&#39;,
  41.                                 start: &#39;2023-06-11&#39;,
  43.                             },
  44.                             //for holidays
  45.                             {
  46.                                 title: &#39;1&#39;,
  47.                                 start: &#39;2023-06-11&#39;,
  48.                                 color: &#39;#FFE3A2&#39;,
  49.                                 textColor: &#39;#000&#39;,
  50.                                 className: &#39;circle_dot&#39;
  51.                             },
  52.                             {
  53.                                 title: &#39;AVAILABLE&#39;,
  54.                                 start: &#39;2023-06-12&#39;,
  55.                                 color: &#39;#257e4a&#39;,
  56.                                 textColor: &#39;#ffffff&#39;,
  58.                             },
  59.                             //for holidays
  60.                             {
  61.                                 title: &#39;2&#39;,
  62.                                 start: &#39;2023-06-12&#39;,
  63.                                 color: &#39;#FFE3A2&#39;,
  64.                                 textColor: &#39;#000&#39;,
  65.                                 className: &#39;circle_dot&#39;
  66.                             },
  67.                             {
  68.                                 title: &#39;FULL&#39;,
  69.                                 start: &#39;2023-06-23&#39;,
  70.                                 color: &#39;#e66d1d&#39;
  71.                             },
  72.                             {
  73.                                 title: &#39;AVAILABLE&#39;,
  74.                                 start: &#39;2023-06-28&#39;,
  75.                             }
  76.                         ],
  77.                         color: &#39;black&#39;,     // an universal option!
  78.                         textColor: &#39;yellow&#39;, // an universal option!
  79.                         className: &#39;text-center&#39;
  80.                     }
  81.                 ]
  82.             });
  84.         });

<!-- language: lang-css -->

  1.        .circle_dot {
  2.             font-size: 9px;
  3.             width: 12px;
  4.             height: 12px;
  5.             background: #FFE3A2;
  6.             border-radius: 50%;
  7.             color: #000;
  8.             align-items: center;
  9.             justify-content: center;
  10.             font-weight: 500;
  11.             position: absolute;
  12.             top: 0px;
  13.             opacity: 1;
  14.         }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  3. &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
  5. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js&quot;&gt;&lt;/script&gt;
  6. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js&quot;&gt;&lt;/script&gt;
  9. &lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;

<!-- end snippet -->

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

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:

  1. on the top - it will show total holidays of each month
  2. it should number 1,2,3 like badge on dates which has holidays for each month
  3. 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

  1. eventAfterAllRender: function (view) {
  2.     $('.holidaycount').html('').hide();
  3.     $('#holidays-list').html('');
  5.     var loop = 0;
  6.     $('.circle_dot').each(function () {
  7.         loop++;
  8.         $('#holidays-list').append("<p class=\"holidayName\"> <span class=\"holidayNo\">" + loop + "</span>" + $(this).find('.fc-title').text() + "</p>");
  9.         $(this).find('.fc-title').text(loop);
  10.         $('.holidaycount').show();
  11.     });
  12.     $('.holidaycount').html(loop + ' Holidays');
  13. },
  14. eventSources: [
  15.     '/home/getcalendar?bid=test',
  16.     '/home/getholidays',
  17. ]
  1. <p class="holidaycount"></p> - This line is above calendar month
  3. <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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.                 eventAfterAllRender: function (view) {
  2.                     $(&#39;.holidaycount&#39;).html(&#39;&#39;).hide();
  3.                     $(&#39;#holidays-list&#39;).html(&#39;&#39;);
  5.                     var loop = 0;
  6.                     $(&#39;.circle_dot&#39;).each(function () {
  7.                         loop++;
  8.                         $(&#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;);
  9.                         $(this).find(&#39;.fc-title&#39;).text(loop);
  10.                         $(&#39;.holidaycount&#39;).show();
  11.                     });
  12.                     $(&#39;.holidaycount&#39;).html(loop + &#39; Holidays&#39;);
  13.                 },
  14.                 eventSources: [
  15.                     &#39;/home/getcalendar?bid=test&#39;,
  16.                     &#39;/home/getholidays&#39;,
  17.                 ]

<!-- language: lang-html -->

  1. &lt;p class=&quot;holidaycount&quot;&gt;&lt;/p&gt; - This line is above calendar month
  3. &lt;div id=&quot;holidays-list&quot;&gt;&lt;/div&gt; - this line is below calendar month

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月8日 16:39:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76430051.html
  • fullcalendar
  • html
  • javascript
  • jquery
  • momentjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定