Question

我正在尝试构建一个调度程序，这是需求

显示每个资源的工作时间
显示访谈并允许使用调整大小选项更改访谈持续时间，并使用可拖动和可放置的

在制定计划后，如何将每次面试放在正确位置的日程表之上
如果彼此旁边有很多时间表，是否可以将时间表i中的采访拖到j？

$.fn.scheduler = function(options) {
  var context = $(this)
  var resources = {
      start: null,
      end: null,
      ownerId: null,
      ownerName: null,
      duration: 15, // 15 minutes,
      interviews: []
    }
    // build the scheduler

  function build() {
    if (options !== null && options !== undefined)
      $.extend(resources, options)
    var start = resources.start
    var end = resources.end
    var table = $('<table>')
    var temp = start
    console.log(start)
    while (temp < end) {
      console.log(temp)
      var tr = $('<tr>')
      var time = $('<td>')
      time.addClass('time')
      time.html(temp.getHours() + ':' + temp.getMinutes())
      tr.append(time)
      var event = $('<td>')
      event.addClass('event')
      tr.append(event)
      tr.appendTo(table)
      temp.setMinutes(temp.getMinutes() + resources.duration)
    }
    context.append(table)
  }
  build()
}
$(document).ready(function() {
  $('.scheduler').scheduler({
    start: new Date(2015, 11, 21, 9, 0, 0),
    end: new Date(2015, 11, 21, 17, 0, 0),
    ownerId: 1196,
    interviews: [{
      id: 111,
      start: new Date(2015, 11, 21, 11, 35, 0),
      duration: 45
    }]
  })
})

.scheduler {
  height: 200px;
  overflow-y: scroll;
}
.scheduler table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  ;
}
table {
  font-size: 1.0em;
}
table td {
  height: 20px;
  border-bottom: 1px solid #ddd;
}
table td.time {
  border-right: 1px solid #ddd;
}
.time {
  width: 70px;
  font-weight: bold;
  color: #c1c1c1;
}
.event {
  width: 160px;
}
.interview {
  position: absolute;
  width: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='scheduler'>

</div>

JSFIDDLE

Answer 1

对于问题的第一部分，请尝试以下方法：

1-更新你的css如下

.scheduler{
    font-family: Calibri;
    position: relative;
    height: 400px;
    overflow-y: scroll;
}
.interview {
    position: absolute;
    background-color: aqua;
    opacity: 0.5;
    width: 160px;
    border:1px solid #808080;
}

2-将以下JS功能添加到您的调度程序

function showInterviews() {
        for (var interview in resources.interviews) {
            var iw = resources.interviews[interview]
            var timeStart = iw.start.getHours() * 60 + iw.start.getMinutes()
            var timeEnd = timeStart + iw.duration
            var result = context.find('.time').filter(function () {
                return $(this).data('start') <= timeEnd && $(this).data('end') >= timeStart;
            })
            if (result.length > 0) {
                var first = result.first().next()
                var position = first.position()
                console.log(first.css('font-size'))
                var div = $('<div>')
                div.addClass('interview')
                div.attr('start', timeStart)
                div.attr('end', timeEnd)
                div.attr('duration', iw.duration);
                div.css('top', position.top + 1)
                div.css('width', first.width()+1)
                div.css('height', (result.length - 1) * 24  - result.length)
                div.css('left', position.left + 1)
                div.appendTo(context)
            }
        }
    }

3-更新构建函数以将start和end时间存储在数据属性中

var timeStart = temp.getHours() * 60 + temp.getMinutes()
var timeEnd = timeStart + resources.duration
time.attr('data-start', timeStart)
time.attr('data-end', timeEnd)

<强>解释

I-如何找到访谈div和计划表之间的交集，特别是我们正在处理时间段

将每个时段转换为分钟（Hour * 60 + minutes）作为开始，并按start + duration
找到与面试开始和结束时相交的常见标识（td.start <= interview.end and td.End>=interview.start
排除自您的时段开始=上一个广告位结束时间后的结果中的最后一个

II-获取结果中的第一个元素，并在第一个td元素位置的顶部和左侧更新您的面试。

III - 我无法分辨为什么值24存在，我尝试(first.height() + result.length)而不是24但是它没有给出预期的结果，也许有人可以帮助澄清这一点。

这是一个有效的demo

希望它会帮助你

将div放在桌子上的正确位置

1 个答案: