app/template/default/Block/calendar.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  11. 修正年月日：2024/03/27 k.saito
  12. 修正内容：爆速商品フラグ(hidden_bakusoku)の項目をhiddenで追加。
  13. 修正年月日：2024/12/12 k.saito
  14. 修正内容：エリア選択に、「選択して下さい」の項目を追加し、default設定。
  16. #}
  17. {% block javascript %}
  18. {# 使用中 #}
  19. <script src="{{ asset('assets/js/content/CalendarNextMonth.js', 'user_data') }}" type="module"></script>
  20. <script src="{{ asset('assets/js/content/setAreaFromCalendar.js', 'user_data') }}" type="module"></script>
  21. <script src="{{ asset('assets/js/content/pickDayFromCalendar.js', 'user_data') }}" type="module"></script>{# 大竹カレンダーの代わり #}
  23. {% endblock %}
  25. {% block stylesheet %}
  26. <link rel="stylesheet" href="{{ asset('assets/css/calendar.css', 'user_data') }}">
  27. {% endblock %}
  31. {#{% form_theme form 'Form/form_div_layout.twig' %}#}
  35. <div class="ec-role">
  36.     <input type="hidden" id="hidden_bakusoku" name="hidden_bakusoku" value="{{ hidden_bakusoku }}">
  37.     <div>
  38.         {# セレクトボックス #}
  39.         <div class="calendarmidashi">はじめに「設置希望エリア」を選択してください</div>
  40.         <div class="option_Label">
  41.           <label for="calendarAreaSelectBox" class="form-label">設置希望エリア</label><span class="ec-required">必須</span>
  42.         </div>
  43.         <div class="ec-select">
  44.           <select id="calendarAreaSelectBox">
  45.             <option value="" selected>選択してください</option>
  46.             {% for targetArea in area %}
  47.                 <option value="option-{{ targetArea.variable }}">{{ targetArea.name }}</option>
  48.             {% endfor %}
  49.             </select>
  50.         </div>
  51.         <div class="option_Label">
  52.           <label class="form-label">設置希望日カレンダー</label><span class="ec-required">必須</span>
  53.         </div>
  55.         {# 今月用 #}
  56.         <div class="thisMonthTitle">
  57.             <div class="flexInner">
  58.                 <div class="monthButton"> </div>
  59.                 <div class="monthText">{{ ThisMonthTitle }}</div>
  60.                 <div id="nextMonthButton" class="monthButton">翌月</div>
  61.             </div>
  62.         </div>
  63.         {# 来月用 #}
  64.         <div class="nextMonthTitle">
  65.             <div class="flexInner">
  66.                 <div id="prevMonthButton" class="monthButton">前月</div>
  67.                 <div class="monthText">{{ NextMonthTitle }}</div>
  68.                 <div class="monthButton"> </div>
  69.             </div>
  70.         </div>
  71.         <p class="ec-calendarTxt01">左右の<span><img src="/html/user_data/assets/images/content/content/arrow-c-prev.svg" alt=""></span><span><img src="/html/user_data/assets/images/content/content/arrow-c-next.svg" alt=""></span>でスクロールできます</p>
  72.         <p class="ec-calendarTxt01 sp">指タッチでスクロールできます</p>
  74.         <div class="ec-calendar">
  76.             <div class="tableVoxWrap">
  77.                 <div class="tableVox">
  78.                     <table id="this-month-table" class="ec-calendar__month thisTable">
  79.                         <tr class="firstTr">
  80.                             {# 左のAM、PM表示 #}
  81.                             <td class="areaCell">
  82.                                 <div class="area">
  83.                                     {# 各エリアの名前 #}
  84.                                     {% for targetArea in area %}
  85.                                         <div class="{{ targetArea.cssId }}">{{ targetArea.name }}</div>
  86.                                     {% endfor %}
  87.                                 </div>
  88.                                 <div class="schedule-header">AM<br><span class="s">(9:00~13:00)</span></div>
  89.                                 <div class="schedule-header">PM<br><span class="s">(13:00~17:00)</span></div>
  90.                             </td>
  91.                             <td class="btnCell">
  92.                                 <a href="javascript:void(0);" id="js-eccPrevBtn-this-month-table" class="eccBtn prev end"><img src="/html/user_data/assets/images/content/content/arrow-c.svg" alt=""></a>
  93.                             </td>
  94.                             {# 左のAM、PM表示ここまで #}
  95.                             {% for day in ThisMonthCalendar %}
  96.                                 {% if day.day != null %}{# 日曜日基準のため、日付がないカレンダーも表示されるため #}
  97.                                     {# 本日と定休日用 #}
  98.                                     {% if day.today == 1 and day.holiday == 1 %}
  99.                                     <td id="today-and-holiday" class="ec-calendar__today ec-calendar__holiday tdCustom">
  100.                                         {# 曜日表示用 #}
  101.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  102.                                         <div class="calendar_day">{{ day.day }}</div>
  103.                                         <div id="res-holiday">
  104.                                             {% for targetArea in area %}
  105.                                             {% set variable =  targetArea.variable %}
  106.                                             <div class="reserve {{ targetArea.cssId }}">
  107.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  108.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  110.                                             </div>
  111.                                             {% endfor %}
  112.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  113.                                         </div>
  115.                                     </td>
  116.                                     {# 本日のみ #}
  117.                                     {% elseif day.today == 1 and day.holiday == 0 %}
  118.                                     <td id="today" class="ec-calendar__today tdCustom">
  119.                                         {# 曜日表示用 #}
  120.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  121.                                         <div class="calendar_day">{{ day.day }}</div>
  122.                                         <div id="res-holiday">
  123.                                             {% for targetArea in area %}
  124.                                             {% set variable =  targetArea.variable %}
  125.                                             <div class="reserve {{ targetArea.cssId }}">
  126.                                                 {# {{ targetArea.name }} #}
  127.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  128.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  129.                                                  {# 予約時に使用 #}
  130.                                                 {% if subStaffFlg == true %}
  131.                                                 <div id="reservation-main">
  132.                                                     <div class="reservation-am1">
  133.                                                         <div>終日メイン</div>
  134.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  135.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  136.                                                         {% endfor %}
  137.                                                     </div>
  138.                                                 </div>
  139.                                                 <div id="reservation-sub">
  140.                                                     <div class="reservation-am1">
  141.                                                         <div>AMサブスタッフ</div>
  142.                                                         {% for AM1Key,AM1Value in day.reservation[variable].subStaff.AM1 %}
  143.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  144.                                                         {% endfor %}
  145.                                                     </div>
  146.                                                 </div>
  147.                                             {% else %}
  148.                                                 <div id="reservation-main">
  149.                                                     <div class="reservation-am1">
  150.                                                         <div>AM1</div>
  151.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  152.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  153.                                                         {% endfor %}
  154.                                                     </div>
  155.                                                     <div class="reservation-am2">
  156.                                                         <div>AM2</div>
  157.                                                         {% for AM2Key,AM2Value in day.reservation[variable].AM2 %}
  158.                                                             <div class="reservation-staff">{{ AM2Key }}</div>
  159.                                                         {% endfor %}
  160.                                                     </div>
  161.                                                     <div class="reservation-pm1">
  162.                                                         <div>PM1</div>
  163.                                                         {% for PM1Key,PM1Value in day.reservation[variable].PM1 %}
  164.                                                             <div class="reservation-staff">{{ PM1Key }}</div>
  165.                                                         {% endfor %}
  166.                                                     </div>
  167.                                                     <div class="reservation-pm2">
  168.                                                         <div>PM2</div>
  169.                                                         {% for PM2Key,PM2Value in day.reservation[variable].PM2 %}
  170.                                                             <div class="reservation-staff">{{ PM2Key }}</div>
  171.                                                         {% endfor %}
  172.                                                     </div>
  173.                                                 </div>
  174.                                             {% endif %}
  175.                                             {# 予約時に使用 end #}
  176.                                             </div>
  177.                                             {% endfor %}
  178.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  179.                                         </div>
  180.                                     </td>
  181.                                     {% elseif day.today == 0 and day.holiday == 1 %}
  182.                                     <td id="this-month-holiday-{{ day.day }}" class="ec-calendar__holiday tdCustom">
  183.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  184.                                         <div class="calendar_day">{{ day.day }}</div>
  185.                                         <div id="res-holiday">
  186.                                             {% for targetArea in area %}
  187.                                             {% set variable =  targetArea.variable %}
  188.                                             <div class="reserve {{ targetArea.cssId }}">
  189.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  190.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  191.                                             </div>
  192.                                             {% endfor %}
  193.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  194.                                         </div>
  195.                                     </td>
  196.                                     {# 本日ここまで #}
  198.                                     {# 土日は定休日表示にしています。不要な場合は削除して下さい。ここから #}
  200.                                    {# {% elseif day.dayOfWeek == 'Sun' or day.dayOfWeek == 'Sat' %} #}
  201.                                     {% elseif day.dayOfWeek == 'Sun' %}
  202.                                     <td id="this-month-holiday-{{ day.day }}" class="ec-calendar__holiday tdCustom">
  203.                                         {# 曜日表示用 #}
  204.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  205.                                         <div class="calendar_day">{{ day.day }}</div>
  206.                                         <div id="res-holiday">
  207.                                             {% for targetArea in area %}
  208.                                             {% set variable =  targetArea.variable %}
  209.                                             <div class="reserve {{ targetArea.cssId }}">
  210.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  211.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  212.                                             </div>
  213.                                             {% endfor %}
  214.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  215.                                         </div>
  216.                                     </td>
  218.                                     {# 土日は定休日表示にしています。不要な場合は削除して下さい。ここまで #}
  220.                                     {% else %}
  221.                                     {# 何もない平日用 #}
  222.                                     <td class="this-month-ec-calendar__day tdCustom">
  223.                                         {# 曜日表示用 #}
  224.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  225.                                         <div class="calendar_day">{{ day.day }}</div>
  226.                                         {% for targetArea in area %}
  227.                                         {% set variable =  targetArea.variable %}
  228.                                         <div class="reserve {{ targetArea.cssId }}">
  229.                                             {# {{ targetArea.name }} #}
  230.                                             <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  231.                                             <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  233.                                             {# 予約時に使用 #}
  234.                                             {% if subStaffFlg == true %}
  235.                                                 <div id="reservation-main">
  236.                                                     <div class="reservation-am1">
  237.                                                         <div>終日メイン</div>
  238.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  239.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  240.                                                         {% endfor %}
  241.                                                     </div>
  242.                                                 </div>
  243.                                                 <div id="reservation-sub">
  244.                                                     <div class="reservation-am1">
  245.                                                         <div>AMサブスタッフ</div>
  246.                                                         {% for AM1Key,AM1Value in day.reservation[variable].subStaff.AM1 %}
  247.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  248.                                                         {% endfor %}
  249.                                                     </div>
  250.                                                 </div>
  251.                                             {% else %}
  252.                                                 <div id="reservation-main">
  253.                                                     <div class="reservation-am1">
  254.                                                         <div>AM1</div>
  255.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  256.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  257.                                                         {% endfor %}
  258.                                                     </div>
  259.                                                     <div class="reservation-am2">
  260.                                                         <div>AM2</div>
  261.                                                         {% for AM2Key,AM2Value in day.reservation[variable].AM2 %}
  262.                                                             <div class="reservation-staff">{{ AM2Key }}</div>
  263.                                                         {% endfor %}
  264.                                                     </div>
  265.                                                     <div class="reservation-pm1">
  266.                                                         <div>PM1</div>
  267.                                                         {% for PM1Key,PM1Value in day.reservation[variable].PM1 %}
  268.                                                             <div class="reservation-staff">{{ PM1Key }}</div>
  269.                                                         {% endfor %}
  270.                                                     </div>
  271.                                                     <div class="reservation-pm2">
  272.                                                         <div>PM2</div>
  273.                                                         {% for PM2Key,PM2Value in day.reservation[variable].PM2 %}
  274.                                                             <div class="reservation-staff">{{ PM2Key }}</div>
  275.                                                         {% endfor %}
  276.                                                     </div>
  277.                                                 </div>
  278.                                             {% endif %}
  279.                                             {# 予約時に使用 end #}
  280.                                         </div>
  282.                                         {% endfor %}{# targetArea #}
  283.                                         <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  284.                                     </td>
  285.                                     {# {% endif %}#}
  286.                                      {% endif %}
  288.                             {#
  289.                             {% if loop.index % 7 == 0 and loop.index != ThisMonthCalendar|length %}
  292.                         </tr>
  293.                         <tr>
  294.                             {% endif %} #}
  295.                             {% endif %}
  296.                             {% endfor %}
  297.                             <td class="btnCell">
  298.                                 <a href="javascript:void(0);" id="js-eccNextBtn-this-month-table" class="eccBtn next"><img src="/html/user_data/assets/images/content/content/arrow-c.svg" alt=""></a>
  299.                             </td>
  300.                         </tr>
  301.                     </table>
  302.                 </div>
  303.             </div>
  305.             <div class="tableVoxWrap">
  306.                 <div class="tableVox">
  307.                     <table id="next-month-table" class="ec-calendar__month">
  308.                         <tr class="firstTr">
  309.                             {# 左のAM、PM表示 #}
  310.                             <td class="areaCell">
  311.                                 <div class="area">
  312.                                     {# 各エリアの名前 #}
  313.                                     {% for targetArea in area %}
  314.                                         <div class="{{ targetArea.cssId }}">{{ targetArea.name }}</div>
  315.                                     {% endfor %}
  316.                                 </div>
  317.                                 <div class="schedule-header">AM<br><span class="s">(9:00~13:00)</span></div>
  318.                                 <div class="schedule-header">PM<br><span class="s">(13:00~17:00)</span></div>
  319.                             </td>
  320.                             <td class="btnCell">
  321.                                 <a href="javascript:void(0);" id="js-eccPrevBtn-next-month-table" class="eccBtn prev end"><img src="/html/user_data/assets/images/content/content/arrow-c.svg" alt=""></a>
  322.                             </td>
  323.                             {# 左のAM、PM表示ここまで #}
  324.                             {% for day in NextMonthCalendar %}
  325.                                 {% if day.day != null %}{# 日曜日基準のため、日付がないカレンダーも表示されるため #}
  326.                                     {# 本日と定休日用 #}
  327.                                     {% if day.holiday == 1 %}
  328.                                     <td id="next-month-holiday-{{ day.day }}" class="ec-calendar__holiday tdCustom">
  329.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  330.                                         <div class="calendar_day">{{ day.day }}</div>
  331.                                         <div id="res-holiday">
  332.                                             {% for targetArea in area %}
  333.                                             {% set variable =  targetArea.variable %}
  334.                                             <div class="reserve {{ targetArea.cssId }}">
  335.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  336.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  337.                                             </div>
  338.                                             {% endfor %}
  339.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  340.                                         </div>
  341.                                     </td>
  342.                                     {# 本日ここまで #}
  344.                                     {# 土日は定休日表示にしています。不要な場合は削除して下さい。ここから #}
  346.                                    {# {% elseif day.dayOfWeek == 'Sun' or day.dayOfWeek == 'Sat' %} #}
  347.                                     {% elseif day.dayOfWeek == 'Sun' %}
  348.                                     <td id="next-month-holiday-{{ day.day }}" class="ec-calendar__holiday tdCustom">
  349.                                         {# 曜日表示用 #}
  350.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  351.                                         <div class="calendar_day">{{ day.day }}</div>
  352.                                         <div id="res-holiday">
  353.                                             {% for targetArea in area %}
  354.                                             {% set variable =  targetArea.variable %}
  355.                                             <div class="reserve {{ targetArea.cssId }}">
  356.                                                 <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  357.                                                 <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  358.                                             </div>
  359.                                             {% endfor %}
  360.                                             <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  361.                                         </div>
  362.                                     </td>
  364.                                     {# 土日は定休日表示にしています。不要な場合は削除して下さい。ここまで #}
  366.                                     {% else %}
  367.                                     {# 何もない平日用 #}
  368.                                     <td class="next-month-ec-calendar__day tdCustom">
  369.                                         {# 曜日表示用 #}
  370.                                         <div class="ec-calendar__{{ day.dayOfWeek }}">{{ displayWeek[day.dayOfWeek] }}</div>
  371.                                         <div class="calendar_day">{{ day.day }}</div>
  372.                                         {% for targetArea in area %}
  373.                                         {% set variable =  targetArea.variable %}
  374.                                         <div class="reserve {{ targetArea.cssId }}">
  375.                                             <div class="calendar_am">{{ day.reservation[variable].AM }}</div>
  376.                                             <div class="calendar_pm">{{ day.reservation[variable].PM }}</div>
  378.                                             {# 予約時に使用 #}
  379.                                             {% if subStaffFlg == true %}
  380.                                                 <div id="reservation-main">
  381.                                                     <div class="reservation-am1">
  382.                                                         <div>終日メイン</div>
  383.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  384.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  385.                                                         {% endfor %}
  386.                                                     </div>
  387.                                                 </div>
  388.                                                 <div id="reservation-sub">
  389.                                                     <div class="reservation-am1">
  390.                                                         <div>AMサブスタッフ</div>
  391.                                                         {% for AM1Key,AM1Value in day.reservation[variable].subStaff.AM1 %}
  392.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  393.                                                         {% endfor %}
  394.                                                     </div>
  395.                                                 </div>
  396.                                             {% else %}
  397.                                                 <div id="reservation-main">
  398.                                                     <div class="reservation-am1">
  399.                                                         <div>AM1</div>
  400.                                                         {% for AM1Key,AM1Value in day.reservation[variable].AM1 %}
  401.                                                             <div class="reservation-staff">{{ AM1Key }}</div>
  402.                                                         {% endfor %}
  403.                                                     </div>
  404.                                                     <div class="reservation-am2">
  405.                                                         <div>AM2</div>
  406.                                                         {% for AM2Key,AM2Value in day.reservation[variable].AM2 %}
  407.                                                             <div class="reservation-staff">{{ AM2Key }}</div>
  408.                                                         {% endfor %}
  409.                                                     </div>
  410.                                                     <div class="reservation-pm1">
  411.                                                         <div>PM1</div>
  412.                                                         {% for PM1Key,PM1Value in day.reservation[variable].PM1 %}
  413.                                                             <div class="reservation-staff">{{ PM1Key }}</div>
  414.                                                         {% endfor %}
  415.                                                     </div>
  416.                                                     <div class="reservation-pm2">
  417.                                                         <div>PM2</div>
  418.                                                         {% for PM2Key,PM2Value in day.reservation[variable].PM2 %}
  419.                                                             <div class="reservation-staff">{{ PM2Key }}</div>
  420.                                                         {% endfor %}
  421.                                                     </div>
  422.                                                 </div>
  423.                                             {% endif %}
  424.                                             {# 予約時に使用 end #}
  425.                                         </div>
  427.                                         {% endfor %}{# targetArea #}
  428.                                         <div class="yearMonthDay">{{ day.yearMonthDay }}</div>
  429.                                     </td>
  430.                                     {# {% endif %}#}
  431.                                      {% endif %}
  433.                             {#
  434.                             {% if loop.index % 7 == 0 and loop.index != ThisMonthCalendar|length %}
  435.                         </tr>
  436.                         <tr>
  437.                             {% endif %} #}
  438.                                 {% endif %}
  439.                                 {% endfor %}
  440.                                 <td class="btnCell">
  441.                                     <a href="javascript:void(0);" id="js-eccNextBtn-next-month-table" class="eccBtn next"><img src="/html/user_data/assets/images/content/content/arrow-c.svg" alt=""></a>
  442.                                 </td>
  443.                         </tr>
  444.                     </table>
  445.                 </div>
  446.             </div>
  447.         </div>
  448.         <p class="note01"><span>〇＝予約できます</span><span>△＝あとわずか</span><span>×＝予約不可</span><span>赤文字は休業日</span></p>
  449.     </div>
  450. </div>