javascript - 时间段选择的完整日历回调函数-6ren

javascript - 时间段选择的完整日历回调函数

转载作者：行者123 更新时间：2023-12-02 22:44:32

25

4

如何获取所选的时间？

在我的场景中，我有一个可选择的日历，用户可以选择日历的某些单元格，然后如果所选时间小于 3 小时，它将继续并执行一些操作，但如果时差更大超过3小时，则会显示警报消息。

here is a sample but I want to do it before select event.

https://codepen.io/nasser-ali-karimi/pen/KKKNzRB?editors=0010

$(function() {
  $('#calendar').fullCalendar({
    selectable: true,
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },
    select: function(startDate, endDate) {
      // Find the time diff for checking the druation.
      var fromTime = parseInt(new Date(startDate.format()).getTime()/1000); 
      var toTime = parseInt(new Date(endDate.format()).getTime()/1000);
      var timeDiff = (toTime - fromTime)/3600;  // will give difference in hrs

      // Check if user selected time more than 3 hours then, show the warning.
      if (timeDiff > 3) {
        $('.fc-highlight').css('background', 'red');
      }
      else {
        alert("continue !");
      }
    }
  });

});

为了更好的用户体验，我想将所选部分的颜色更改为黄色或红色，以警告用户。但我不知道是否有内置功能。</p>

使用Fullcalendar v3和moments.js!

最佳答案

根据@ADyson的指导，我终于可以做到这一点。

1-使用selectAllow为此。

2-根据条件改变背景颜色

我尝试对 .fc-highlight 使用直接更改，但它不起作用，因此我向 #calendar 添加一个类并使其恢复地面红色并且它起作用了。

#calendar.invalid-choice .fc-highlight {
  background: red;
}

这是我所做的简要说明，但如果您愿意，可以查看附加的整个代码。

selectAllow: function(date) {
  if (timeDiff > 3) {
    $('#calendar').addClass('invalid-choice');
  }
  else {
    $('#calendar').removeClass('invalid-choice');      
  }
},

演示 https://codepen.io/nasser-ali-karimi/pen/ExxNbMW

            
jQuery(document).ready(function($) {
  $('body').append(`<div class="popover fade right in" role="tooltip" id="selected-hours" style="top: 670px; left: 670px; display: none;">
    <div class="popover-data">
    </div>
  </div>`);

  $('#calendar').fullCalendar({
     selectable: true,
    defaultView: 'agendaDay',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },

    selectAllow: function(date) {
      // Find the time diff for checking the druation.
      var fromTime = new Date(date.start.format()).getTime()/1000; 
      var toTime = new Date(date.end.format()).getTime()/1000;
      var timeDiff = (toTime - fromTime)/3600;  // will give difference in hrs

      var offset = $('body').offset();
      var left = event.pageX;
      var top = event.pageY;
      var theHeight = $('#selected-hours').height();
      $('#selected-hours').show();
      $('#selected-hours .popover-data').html(timeDiff).css({
        'min-width': "20px",
        'text-align': 'center',
      });
      if (timeDiff > 3) {
        $('#calendar').addClass('invalid-choice');
      }
      else {
        $('#calendar').removeClass('invalid-choice');      
      }
      $('#selected-hours').css('left', (left + 'px'));
      $('#selected-hours').css('top', (top - (theHeight / 2)) + 'px');
      $('#selected-hours').css({
        'z-index': '9999',
        'position': 'absolute',
        'display': 'block',
      });
      },
    select: function(startDate, endDate, jsEvent, view, resource) {
       $('#selected-hours').hide();
    }
  });

});

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

#calendar.invalid-choice .fc-highlight {
  background: red;
}

<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.css" crossorigin="anonymous">
    <title>Page Title</title>
  </head>
  <body>
    <h1>Full calendar change highlight background during selections</h1>
    <div id='calendar'></div>
  </body>
</html>

关于javascript - 时间段选择的完整日历回调函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58461289/

25

4

0

文章推荐： javascript - jquery 代码不适用于所有选择选项

文章推荐： javascript - 如何使用reactjs向数组添加多个项目

文章推荐： javascript - 如何将选择选项标签中的 attr 更改为值？

Java 时间段(十进制年数)
如果我使用以下方法计算 java.time 中 2 个 LocalDate 之间的差异: Period p = Period.between(testDate, today); 然后我得到一个包含年、
sql - 表示日期/时间段
我正在开发一个有多种不同费率的预订平台。这些费率由一天中的时间、星期几和一年中的一天决定。以下是所涉及的间隔类型的一些示例: 周一至周五，上午 9 点至下午 5 点周六和周日，中午 12 点到早上
r - 时间段 R 的条件总和
我有大量数据，包括开始时间、停止时间和值。开始和停止时间因行而异，以 5 分钟为增量。我正在尝试创建一个新的数据框，该数据框具有 5 分钟的间隔以及该间隔在行的开始和停止范围内的所有行的总和。我有一
mysql - 时间段 SQL 查询
我有一个这样的表: --------------------------------------------- |Id | Step | StartedAt
两个日期之间的 C# 时间段(以周为单位)
我有一个网络应用程序，用户将在其中输入 2 个日期。一个 StartDate 和一个 EndDate。现在我想编写它，以便在选择 StartDate 和 EndDate 时确定有多少周，然后显示这些周
java - 如何比较两个 Joda 时间段
这看起来并不直截了当。我正在尝试: @Override public int compare(Period o1, Period o2) { return o1.toStandardDays
php - iCal 不显示组织者的 session 时间段
我必须为团队发送 session 邀请，这是我的邮件 $ical = 'BEGIN:VCALENDAR PRODID:-//Microsoft Corporation//Outlook 11.0
php - DateInterval 不接受以毫秒为单位的 ISO 8601 时间段
我有这个 ISO 8601 时间段字符串: P0Y0M0DT3H5M0.000S 并且 PHP7.4 无法用它构造 DateInterval。 format('%h Hours %m Minutes
time - LibreOffice SUM 时间段，格式为 HH :MM:SS
我想要获取包含一段时间(格式为 HH:MM:SS)的多个单元格的总和。在 LibreOffice Calc 4.0.3.3 中，我复制粘贴了 G14:G21 范围内的时间段，并将单元格格式设置为时间
mysql - SELECT/GROUP BY - 时间段(10 秒、30 秒等)
我有一个表(MySQL)，每n秒捕获一次样本。该表有很多列，但重要的是两列:时间戳(TIMESTAMP 类型)和计数(INT 类型)。我想做的是获取一定时间范围内计数列的总和和平均值。例如，我每 2
mysql - SELECT/GROUP BY - 时间段(10 秒、30 秒等)
我有一个表(MySQL)，每n秒捕获一次样本。该表有很多列，但重要的是两列:时间戳(TIMESTAMP 类型)和计数(INT 类型)。我想做的是获取一定时间范围内计数列的总和和平均值。例如，我每 2
java - 使用 Joda-Time PeriodFormatter 显示 "negative"时间段
我在一个项目上使用 joda-time (1.6.2)，我正在做的其中一件事就是计算预测时间和实际时间之间的差异。这种差异有时是积极的，有时是消极的。虽然适当的方法可能是使用 Duration 而不是
mysql - SELECT/GROUP BY - 时间段(10 秒、30 秒等)
我有一个表 (MySQL)，它每 n 秒捕获一次样本。该表有很多列，但最重要的是两列:一个时间戳(TIMESTAMP 类型)和一个计数(INT 类型)。我想做的是获取计数列在一段时间内的总和和平均值
date-range - 如何在 Google Data Studio 中创建 'past 3 months' 时间段
我想让我的折线图显示过去 3 个月的数据。 GDS 有一个“最后一个季度”的日期范围，但这显示的是 Q1、Q2、Q3 或 Q4。我需要的是过去3个整月(不算当月)的数据。我尝试创建一个计算字段，但事实
date-range - 如何在 Google Data Studio 中创建 'past 3 months' 时间段
我想让我的折线图显示过去 3 个月的数据。 GDS 有一个“最后一个季度”的日期范围，但这显示的是 Q1、Q2、Q3 或 Q4。我需要的是过去3个整月(不算当月)的数据。我尝试创建一个计算字段，但事实

首页

博学

6Ren·AI

商城

javascript - 时间段选择的完整日历回调函数