带有JQuery的Bootstrap日历

自举日历

围绕着这个巨大的社区,我们给我们越来越深刻的印象 Bootstrap,一个著名的CSS框架 ,由Twitter创建。 这次我向您介绍一个基于Bootstrap的日历 用Javascript和JQuery编程,我还将详细解释日历的部分操作,并添加一些您可以做的技巧和改进。

这个Bootstrap日历设计简洁,完全 响应,在所有设备上看起来都不错! 它还包含一个 翻译成7种以上的语言 和所有 突出并注明每个国家的节日日期。 奢侈!

这个Bootstrap Calendar的操作有点复杂,它最初从JSON文件中提取用户的日期,但是,专门针对以下用户 Creativos Online我会解释如何 从MYSQL数据库中提取事件 在任何系统中的完美实现。

知名数据库系统

知名数据库系统

应用程序主文件的功能:

索引文件

  • Bootstrap 2.3.2加载
  • 日历设计
  • 活动清单
  • 浏览日历
  • 日历的不同视图(天/周/月/年)
  • 在JS中加载应用程序
  • 语言选择

索引-BS3.HTML

  • Bootstrap 3.0加载
  • 日历设计
  • 活动列表
  • 浏览日历
  • 不同的日历视图(天/周/月/年)
  • 在JS中加载应用程序
  • 语言选择

活动.JSON.PHP

  • 具有以下数据的事件列表:
    • ID: 事件标识符
    • 标题: 活动标题
    • 网址: 事件网址
    • 类: 事件类型(信息|警告|…)以获取后续颜色。
    • 开始: 开始日期
    • 结束: 终止日期

应用程序JS

  • 存储应用程序配置的变量。
  • 额外的JQuery功能

日历

  • 主要应用程式设定
  • 日历的主要功能
  • 事件的提取和处理
  • 节日日期
  • 语言加载
  • 加载事件列表
  • 加载不同的日历视图(日/周/月/年)

日历CSS

  • 日历样式
  • 活动列表样式
  • 其他设备的日历样式

从数据库中提取事件

从MYSQL数据库中提取事件 我们将替换文件的行 事件.json.php 通过:

<?php

$link=mysql_connect("localhost", "usuariodeacceso", "contraseñadeacceso");
mysql_select_db("basededatos",$link) OR DIE ("Error: No es posible establecer la conexión");
mysql_set_charset('utf8');

$eventos=mysql_query("SELECT * FROM events'",$link);

while($all = mysql_fetch_assoc($eventos)){
$e = array();
$e['id'] = $all['id'];
$e['start'] = $all['inicio'];
$e['end'] = $all['final'];
$e['title'] = $all['nombre'];
$e['class'] = $all['clase'];
$e['url'] = $all['url'];
$result[] = $e;
}

echo json_encode(array('success' => 1, 'result' => $result));

?>

GitHub | 引导日历

下载| 引导日历

了解更多| 引导程序:CSS框架


14条评论,留下您的评论

发表您的评论

您的电子邮件地址将不会被发表。 必填字段标有 *

*

*

  1. 负责数据:MiguelÁngelGatón
  2. 数据用途:控制垃圾邮件,注释管理。
  3. 合法性:您的同意
  4. 数据通讯:除非有法律义务,否则不会将数据传达给第三方。
  5. 数据存储:Occentus Networks(EU)托管的数据库
  6. 权利:您可以随时限制,恢复和删除您的信息。

  1.   大卫·Z

    当我检查代码塞尔吉奥

    1.    塞尔吉奥·罗德纳斯(SergioRódenas)

      该代码已被检查! 唯一的事情是,您必须在数据库中使用以下字段创建«事件»表:{id | 主页| 结束| 名称| 类url}并配置对数据库的访问!

      1.    ROS

        我已经为其他人更改了这些变量,并允许我将事件添加到数据库中,但是我看不到它反映在日历中。 以及如何根据单击日历的日期恢复事件的数据?

  2.   乔斯·路易斯·扎穆迪奥(@JoseZami)

    要执行并执行事件的创建,则必须创建一个数据库,但是它的作用是我可以向其附加事件,并且默认情况下该语言为西班牙语,因为默认情况下它定义为英语

    1.    塞尔吉奥·罗德纳斯(SergioRódenas)

      要将语言预设为西班牙语,最好用calendar.js文件中的英语替换西班牙语文件中的现有字符串。 但是,还有其他更整洁的方法,您可以在脚本的主要网站或此帖子所附的Github社区中找到它们。
      另外,我将尝试在几周内上传新帖子,其中将解释如何在数据库中创建事件插入。

  3.   乔斯·路易斯·扎穆迪奥(@JoseZami)

    非常感谢你,我将不胜感激的帖子插入事件:)

  4.  

    你好,当我解决所有问题以连接并从数据库中提取数据时,我没有任何事件

  5.   迭戈

    不在数据库中插入事件

  6.   Gonza配音

    您可以发布如何插入事件吗? 在开始和结束字段中是什么样的数据? 时间戳? 还有“ 0”,我需要插入并能够编辑事件。 谢谢

  7.   周四

    如果不存在`bootstrap_calendar`,则创建数据库/ *!40100默认字符集utf8收集utf8_spanish_ci * /;
    使用`bootstrap_calendar`;
    -适用于Win10.13(x5.6.13)的MySQL dump 32 Distrib 86
    -
    -主机:127.0.0.1数据库:bootstrap_calendar
    -——————————————————
    -服务器版本5.5.27

    / *!40101 SET @OLD_CHARACTER_SET_CLIENT = @@ CHARACTER_SET_CLIENT * /;
    / *!40101 SET @OLD_CHARACTER_SET_RESULTS = @@ CHARACTER_SET_RESULTS * /;
    / *!40101 SET @OLD_COLLATION_CONNECTION = @@ COLLATION_CONNECTION * /;
    / *!40101设置名称utf8 * /;
    / *!40103 SET @OLD_TIME_ZONE = @@ TIME_ZONE * /;
    / *!40103 SET TIME_ZONE ='+ 00:00'* /;
    / *!40014 SET @OLD_UNIQUE_CHECKS = @@ UNIQUE_CHECKS,UNIQUE_CHECKS = 0 * /;
    / *!40014 SET @OLD_FOREIGN_KEY_CHECKS = @@ FOREIGN_KEY_CHECKS,FOREIGN_KEY_CHECKS = 0 * /;
    / *!40101 SET @OLD_SQL_MODE = @@ SQL_MODE,SQL_MODE ='NO_AUTO_VALUE_ON_ZERO'* /;
    / *!40111 SET @OLD_SQL_NOTES = @@ SQL_NOTES,SQL_NOTES = 0 * /;

    -
    -表`events'的表结构
    -

    如果存在`events`,则删除表;
    / *!40101 SET @saved_cs_client = @@ character_set_client * /;
    / *!40101 SET character_set_client = utf8 * /;
    创建表`事件`(
    `id` int(10)unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar(150)收集utf8_spanish_ci默认值为NULL,
    `body`文字COLLATE utf8_spanish_ci NOT NULL,
    url varchar(150)收集utf8_spanish_ci NOT NULL,
    `class` varchar(45)收集utf8_spanish_ci NOT NULL默认'info',
    `start` varchar(15)收集utf8_spanish_ci NOT NULL,
    `end` varchar(15)收集utf8_spanish_ci NOT NULL,
    主键(`id`)
    )引擎= InnoDB默认字符集= utf8集合= utf8_spanish_ci;
    / *!40101 SET character_set_client = @saved_cs_client * /;

    -
    -转储表事件的数据
    -

    锁表`事件`写;
    / *!40000 ALTER TABLE`events` DISABLE KEYS * /;
    / *!40000 ALTER TABLE`events` ENABLE KEYS * /;
    解锁表;
    / *!40103 SET TIME_ZONE = @ OLD_TIME_ZONE * /;

    / *!40101 SET SQL_MODE = @ OLD_SQL_MODE * /;
    / *!40014 SET FOREIGN_KEY_CHECKS = @ OLD_FOREIGN_KEY_CHECKS * /;
    / *!40014 SET UNIQUE_CHECKS = @ OLD_UNIQUE_CHECKS * /;
    / *!40101 SET CHARACTER_SET_CLIENT = @ OLD_CHARACTER_SET_CLIENT * /;
    / *!40101 SET CHARACTER_SET_RESULTS = @ OLD_CHARACTER_SET_RESULTS * /;
    / *!40101 SET COLLATION_CONNECTION = @ OLD_COLLATION_CONNECTION * /;
    / *!40111 SET SQL_NOTES = @ OLD_SQL_NOTES * /;

    -转储于2014-05-31 14:38:23完成

  8.   juan77

    你好migos有什么方法可以更改JSON日期格式

  9.   吉塞拉布拉

    日历非常好,只有在添加新事件时,默认情况下,开始和结束时的日期均为英语格式,如何将其更改为西班牙语? 应该是DD / MM / YYYY。 非常感谢和问候

  10.   费边

    您好,日历很好,但是更新日期时不会立即反映在日历中。 我可以做什么 ?

    我还有另一个问题,如何在月视图中显示所有点,是否可以扩大正方形? 一天对应什么?

  11.   Alex

    我有一个问题,在本地加载示例时,它可以完美运行,但是当我将其上传到在线服务器时,它仅显示按钮中的日历,不会显示任何内容。 任何想法请问服务器可能是什么或有什么问题要修复它。