Web应用程序 - 显示月份日期功能的滑块

Question

对于学校项目，我们必须构建一个Web应用程序。我将创造一些人们可以跟踪他们的课程，他们的家庭作业和他们的空闲时间的东西。计划者/日历。 （我说这听起来很蹩脚，但是嘿，我累了，英语不是我的第一语言;）

我将在CodeIgniter中为PHP逻辑工作，并结合通常的.. CSS，jQuery，mySQL。 PHP是课程的要求;我之所以选择在CI中这样做是因为我想学习框架。我们必须炫耀我们在“学校生涯”这一点上能做些什么。

无论如何，我想问一些关于我想要实现的功能的见解。在我的页面顶部，我想显示一个包含该月日期的栏。在天数下面，我将通过一些点显示当天添加了多少任务。当用户点击上一个或下一个时，我想显示上一个/下个月的日期。我还想在这个盒子下方放置一些滑块，用户可以使用它来左右滑动，并循环使用这些日子。我希望这有道理吗？

编辑2：我希望滑块动态。如果用户滑到上个月或下个月，或点击按钮，我希望它加载上个月/下个月的日期并显示这些日期。另外，假设我们在一个月的第26个月，滑块必须显示本月的10-31和下个月的1-10。我想我还必须改变我的月份指示（不像这里的图像那样），以便用户知道何时开始另一个月（我将向他们展示月份的名称）。

这是一张照片（不要介意那些数字搞砸了，我在Photoshop中正确地做这件事。将修复那个tomo）：

我一直在关注jQuery UI滑块。我想我必须从数据库或使用PHP获取天数？我想cal_days_in_month函数可以在这里派上用场。当用户向左或向右单击箭头或幻灯片时，我不希望页面刷新。我应该在那里使用ajax电话吗？说实话，我不太清楚如何实现这一点。这些数字也是日历类型视图的链接，显示在此栏下方。 我可以使用CI日历类吗？或者更适合成熟的谷歌日历类型的日历？我认为this screencast可能有用吗？

如果可能的话，有人可以提供一些有关如何开始研究以及我可能使用哪些插件/等的见解？说实话，我不知道从哪里开始。我确信我能以某种方式解决这个问题，但我想通过这里的一些帮助获得kickstart会很好。我看到的主要问题是滑块/下一个/上一个东西，并在上个月/下个月的日子里加载。

提前致谢。

编辑：我意识到有些人可能会说/想'OMG，你为什么不使用你拥有的技能而不是尝试一些你要问我们的东西！'。嗯，这是因为我真的想在做这个项目时学到一些东西。请记住，我不是在这里要求代码行，我只是想要了解从哪里开始以及使用什么东西;也许是可以帮助我的小片段。感谢。

更新：

我有一个非常基本的“日间酒吧”工作。仍然没有滑块，前一个和下一个按钮也不起作用，但是嘿..至少它动态地填充它。它显示当天前5天，然后是本月直到结束。无论剩下什么都填满了下个月的日子。相当基本。但是，我确实有几个问题！

因为昨天有人告诉我，我正在按照我的方式做一些事情来打破设计模式，我对我现在工作的方式非常偏执，我真的很喜欢'CodeIgniter pro'的一些反馈。为了填写“日期栏”，我用几种方法创建了一个帮助器。 （一种动态填充你在图片中看到的'月份'事物的方法，另一种方法init（）加载日期列表，就像我之前解释过的那样）。我在控制器中加载了这个帮助器，我现在正在使用我视图中的方法：

    <ul>
        <?php
            init($current_day_of_month, $current_month, 
                          $current_year, $days_in_current_month, $show_history);
        ?>
    </ul>

帮助者然后在我的视图中回应我的日期值。这是好事还是坏事？当我想开始为此编写代码时，我一直在想错误的方法。我想在我的控制器中的某个地方有一个函数，然后从视图中调用它，但我读到我不应该这样做。我不得不改变我的逻辑。我发现很难绕过这样一个事实：我必须通过向我的视图（从我的控制器）发送数据数组来做到这一点，所以我选择创建帮助器。好？坏？任何提示，我应该阅读的资源，我应该看的截屏视频？非常感谢。

Answer 1

这对我来说似乎很直接。我现在没有时间写完整件事。但是我会采取什么步骤。

1）创建一个模型，该模型获取一个月的所有任务，并使用该模型创建{date}=>{num_tasks}的数组，例如{'1'=>3,'2'=>1, "3"=>0, ...}。 //提示：使用常规SQL计数或只是循环并计算它们。

2）创建一个控制器函数，将该数组作为JSON返回。像这样：

public function get_month($month, $year) {
    $tasks = $this->task_model->get_each_days_taskcount($month, $year);
    $json = json_encode ($tasks);
    echo $json;
}

3）编写一个带有javascript函数的html页面，用AJAX调用这个控制器函数。类似的东西：

function fill_calendar(month, year) {
$.get('some_controller/get_month/' + month + '/' + year, function(data) {
    // parse the JSON then
    // do something with the data here like $('#calendar').append();
});
}

4）本月加载如下：

$(function() {
    var d = new Date();
    var tmonth = d.getMonth();
    var tyear = d.getFullYear();
    fill_calendar(tmonth, tyear); // populate with this month
});

5）使prev和next按钮与

类似

$('#prev_button').click(function() {
    fill_calendar(current_month - 1 , tyear);
    // you will probly need to make this calculation smarter than just minus 1
});

Answer 2

如果您希望系统具有动态性，关键是要缩短数据传输时间。因此，正如icchanobot所说，使用Ajax发送特定月份的请求。使用get：

'some_controller?m=' + month + '&y=' + year

甚至：

'some_controller?next' // or previous

控制器必须获取正确月份的数据，但不能以尽可能紧的格式发回整个月 - 仅显示显示所需的数据。您可以查询在该月的哪几天运行的事件数：

选择日，计数（事件）   来自event_table   在'yyyy-mm-01'和'yyyy-mm-31'之间的日期   GROUP BY天   按天排序;

查询需要适应您的数据结构 - 使用函数从完整日期获取日期，并且可能使用索引以便查询快速返回数据。

然后控制器返回一个尽可能短的字符串，按日顺序排序的相关数据：

1 = 3,15 = 1.29 = 2

这意味着“1st = 3个事件，15个= 1个事件，29个= 2个事件”。如果你不想要事件的数量那么“1,15,2”就足够了。空天不会传播。

数据由网页上的ajax事件处理程序接收，您使用split解析它，然后使用循环填充滑块。

在一个非常动态的应用程序中，你最大的阻力就是当你反复询问下个月和下一个月时它会减速。 一些技巧：

• 在等待数据时更新显示;您发送查询，并在处理时，您可以将月份滑入视图，使用正确的天数，看起来已禁用，以便用户立即知道他们将获取他们的数据，并且正在进行中。然后，当数据到来时，填充并突出显示。虽然不是，但它会立刻感觉到。
• 避免处理用户不再需要的信息。如果有人点击“下一步”三次，他们想要七月的数据，而不是七月和七月。不要处理你不显示的内容。
• 缓存您已经问过的数据，除非您希望系统动态返回到服务器以获取日历的最新状态。你已经要求提供5月和6月的数据，但没有显示出来;当用户点击“返回”时，不要再次询问该数据。

祝你好运！

Answer 3

我真的没有看到这个的复杂性.......

如果您只是使用jQuery UI DataPicker并修改js文件以便将日期存储在滑块中，那么将数据放入jQuery UI Slider中，您几乎应该拥有所需的内容。