Calendar jQuery移动日历，带有3种国家日颜色

我正在考虑创建一个活动和预订系统

我找到了StackOverflow问题，它显示和

我想显示一个日历，其中我从服务器获取的某些日期是

可用

不可用

含蓄的

当触摸到预定日期或可用日期时，我想显示时间-每天可以有多个时间。然后，用户可以单击某个时间来保留它，这将触发Ajax请求

例如，jQueryUIDatePicker具有

 onSelect: function(date, inst) {

从上面的选择器中我可以看到，我所需要的不是现成的。在我自己动手破解之前：

哪一个最适合我想要的

有没有更好的已经满足了我的需求

---

更新：

萤火虫给了我

25

其中ui-btn-up-e可以从a-e更改为a-e

现在我需要找出数据主题是否也需要更改

 $('.ui-datebox-griddate').click(function () {
   alert($(this).attr("class"));
 }

切换三个类并每次保存状态的最佳方式是什么

 $('.ui-datebox-griddate').toggle(
   function () {
     $(this).????? // change ui-btn-up-? to ui-btn-up-a
     $.get(...)
  },
   function () {
     $(this).????? // change ui-btn-up-a to ui-btn-up-b
     $.get(...)
  },
   function () {
     $(this).????? // change ui-btn-up-b to ui-btn-up-c
     $.get(...)
  }
);

---

更新：注意：当我单击时，日历会更改日期，完全重新加载日历。也许我需要停止这一点：（

根据J.T.Sage所说，我想我会玩一玩jQuery Mobile Calendar。我想我有一些东西可以扩展以满足您的要求。我不确定多色主题化在多大程度上是可能的（无需大量修改）

jQueryMobile-日期框演示
$（document.bind（“mobileinit”，function（）{$.mobile.page.prototype.options.degradeInputs.date='text'；}）；
$（'#page'）.live（'pagecreate'，函数（事件）{
$（'#mydate'）.bind（'change'，function（）{
警报（$（this.val（））；
});
});

更新

我认为highDates机制可以被完全绕过，并且每个日子都是唯一的目标日期。插件维护一个JavaScript日期对象，该对象是最后选择的日期（如果没有选择任何日期，则为今天）-因此，应该可以获取当前月份并遍历所有匹配数据，根据需要更新当前月份的匹配天数（例如，将下面的setcolors方法替换为数据/状态感知的方法）

$（'#page'）.live（'pagecreate'，函数（事件）{
$（'#mydate'）.bind（'change'，function（）{
//警报（$（this.val（））；
警报（$（'mydate'）。数据（'datebox'）。日期）；
});
设置颜色（）；
$（'#mydate'）。绑定（'datebox'，函数（e，按下）{
设置颜色（）；
});
$（'.ui日期框gridplus，.ui日期框gridplus'）.bind（'vclick'，function（）{
//处理不断变化的月份
设置颜色（）；
//警报（$（'mydate'）。数据（'datebox'）。日期）；
});
函数setcolors（）{
$（'div.ui-datebox-griddate[data date=25][数据主题]）.css（{“背景色”：“红色”，“背景图像”：“无”，“颜色”：“白色”）；
$（'div.ui-datebox-griddate[data date=26][数据主题]）.css（{“背景颜色”：“绿色”，“背景图像”：“无”，“颜色”：“白色”）；
$（'div.ui-datebox-griddate[data date=27][数据主题]）.css（{“背景色”：“蓝色”，“背景图像”：“无”，“颜色”：“白色”）；
}
});

切换三个类并每次保存状态的最佳方式是什么

 $('.ui-datebox-griddate').toggle(
   function () {
     $(this).????? // change ui-btn-up-? to ui-btn-up-a
     $.get(...)
  },
   function () {
     $(this).????? // change ui-btn-up-a to ui-btn-up-b
     $.get(...)
  },
   function () {
     $(this).????? // change ui-btn-up-b to ui-btn-up-c
     $.get(...)
  }
);

比如：

$('.ui-datebox-griddate').click(function (e) {
  var $this = $(this);
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];

  if (typeof $this.data("ui-btn-cycle") == "undefined" ) {
    this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
    $this.data("ui-btn-cycle", cycle[0]);
  }

  for (var i=0; i<cycle.length; i++) {
    if ( $this.hasClass(cycle[i]) ) {
      $this.removeClass(cycle[i]).addClass(cycle[i % cycle.length]);
      $this.data("ui-btn-cycle", [i % cycle.length]);
      break;
    }
  }
  $.get( ... );

  e.preventDefault() // stop default click behaviour
});

---

当前状态将始终是相应元素上的

.data（“ui btn cycle”）[0]

。请参见此处的工作：

fwiw，DateBox今天和昨天都有一些更新，主要是现在它允许highDates，一组日期高亮显示（例如，您被“保留”），它已经有blackDates（例如，“不可用”）。它确实有一些回调支持，但你必须做一些工作才能获得时间列表功能。谢谢@JTS-我会看一看谢谢你问这个问题。我也有同样的问题问到了tooThanks，切换颜色从哪里来？啊哈。Firebug给了我

25

可以从a-e更改ui-btn-up-e的地方。现在我需要确定数据主题是否也需要更改，因为有jQuery移动主题。您可以指定要用于突出显示的主题（pickPageOHighButtonTheme）但是我认为这个主题用于所有突出显示。谢谢-请查看我的更新。我不认为我需要关心这个主题，但是我以前没有尝试过在多个类中更改类名…fwiw，这个数据主题用于悬停函数。它为上下类提供了这个功能。太好了！-我还没有时间修改检查一下，但它看起来是可行的。顺便问一下，为什么不切换（函数，函数，函数）呢？您的解决方案会更短，因为我需要为每个切换执行ajax，但只是wondering@mplungjan因为。@Tomalak是的，确实是这样：）@mplungjan哦，很好。：）我甚至不知道那个。这可能是一个有用的替代方法，只需为Ajax调用创建一个单独的函数，您就可以了。这就是我在更新中发布的函数-我猜您只是认为我创建了一个幻想方法；）

$('.ui-datebox-griddate').click(function (e) {
  var $this = $(this);
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];

  if (typeof $this.data("ui-btn-cycle") == "undefined" ) {
    this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
    $this.data("ui-btn-cycle", cycle[0]);
  }

  for (var i=0; i<cycle.length; i++) {
    if ( $this.hasClass(cycle[i]) ) {
      $this.removeClass(cycle[i]).addClass(cycle[i % cycle.length]);
      $this.data("ui-btn-cycle", [i % cycle.length]);
      break;
    }
  }
  $.get( ... );

  e.preventDefault() // stop default click behaviour
});

$('.ui-datebox-griddate')
.each(function () {
  var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];
  $(this).data("ui-btn-cycle", cycle);
  this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
})
.click(function (e) {
  var cycle = $(this).data("ui-btn-cycle");
  $(this).removeClass(cycle[0]).addClass(cycle[1]);
  cycle.push(cycle.shift());
  e.preventDefault();
});