Question

如何获取所选时间？

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

这是一个示例，但我想在select事件之前进行。

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！

Answer 1

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

1-为此使用selectAllow。

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

我尝试在.fc-highlight上使用直接更改，但是它不起作用，因此我向#calendar添加了一个类并使其返回接地red并起作用。

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

这是我所做的简短介绍，但是如果您愿意，可以附上完整的代码。

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

DEMO 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>

完整的日历回调功能可用于选择时隙

1 个答案: