Calendário de bootstrap com JQuery

bootstrap-calendar

Estamos cada vez mais impressionados com a imensa comunidade que gira em torno Bootstrap, um framework CSS bem conhecido , criado pelo Twitter. Desta vez, apresento a vocês um calendário baseado em Bootstrap programado com Javascript e JQueryAlém disso, explicarei em detalhes parte do funcionamento do calendário e adicionarei alguns truques e melhorias que você pode fazer.

Este calendário Bootstrap tem um design limpo e é totalmente responsivo, ficará bem em todos os dispositivos! Ele também incorpora um tradução em mais de 7 idiomas e tudo as datas festivas de cada país são destacadas e anotadas. Um luxo!

O funcionamento deste Bootstrap Calendar é um tanto complexo, ele extrai as datas do usuário de um arquivo JSON inicialmente, mas, exclusivamente para usuários Creativos Online, explicarei como extrair os eventos de um banco de dados MYSQL para sua perfeita implementação em qualquer sistema.

Sistema de banco de dados bem conhecido

Sistema de banco de dados bem conhecido

Funções dos principais arquivos do aplicativo:

ÍNDICE.HTML

  • Carregamento do Bootstrap 2.3.2
  • Design do calendário
  • Lista de Eventos
  • Navegando no calendário
  • Diferentes visualizações do calendário (dia / semana / mês / ano)
  • Carregando o aplicativo em JS
  • Seleção de idioma

ÍNDICE-BS3.HTML

  • Carregamento do Bootstrap 3.0
  • Design do calendário
  • Lista de evento
  • Navegando no calendário
  • Diferentes visualizações do calendário (dia / semana / mês / ano)
  • Carregando o aplicativo em JS
  • Seleção de idioma

EVENTOS.JSON.PHP

  • Lista de eventos com os seguintes dados:
    • ID: identificador de evento
    • título: Título do evento
    • url: url do evento
    • classe: tipo de evento (info | aviso |…) para cores subsequentes.
    • Сomeçar: data de início
    • fim: Data de finalização

APP.JS

  • Variáveis ​​que armazenam a configuração do aplicativo.
  • Funções JQuery extras

CALENDÁRIO.JS

  • Configurações principais do aplicativo
  • Principais funções do calendário
  • Extração e tratamento de eventos
  • Datas festivas
  • Carregando idioma
  • Carregando a lista de eventos
  • Carregando as diferentes visualizações do calendário (dia / semana / mês / ano)

CALENDÁRIO.CSS

  • Estilos de calendário
  • Estilos de lista de eventos
  • Estilos de calendário para outros dispositivos

Extraia eventos de um banco de dados

Para extrair os eventos de um banco de dados MYSQL vamos substituir as linhas do arquivo eventos.json.php por:

<?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 | Calendário Bootstrap

Baixar | Calendário Bootstrap

Saiba mais | Bootstrap: CSS Framework


Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios são marcados com *

*

*

  1. Responsável pelos dados: Miguel Ángel Gatón
  2. Finalidade dos dados: Controle de SPAM, gerenciamento de comentários.
  3. Legitimação: Seu consentimento
  4. Comunicação de dados: Os dados não serão comunicados a terceiros, exceto por obrigação legal.
  5. Armazenamento de dados: banco de dados hospedado pela Occentus Networks (UE)
  6. Direitos: A qualquer momento você pode limitar, recuperar e excluir suas informações.

      David Z dito

    enquanto eu verifico o código Sergio

         Sérgio Rodenas dito

      O código já foi verificado! A única coisa, você tem que criar a tabela «eventos» em seu banco de dados com os seguintes campos: {id | casa | fim | nome | classe | url} e configure o acesso ao seu banco de dados!

           ros dito

        Mudei essas variáveis ​​para outras pessoas e isso me permitiu adicionar o evento ao meu banco de dados, mas não o vejo refletido no calendário. E como posso recuperar os dados dos eventos dependendo do dia em que clico no calendário?

      José Luis Zamudio (@JoseZami) dito

    Para fazer e realizar a criação de eventos, então um banco de dados deve ser criado, mas do que se trata é que posso anexar eventos a ele e por padrão o idioma espanhol porque é definido como Inglês por padrão

         Sérgio Rodenas dito

      Para predefinir o idioma como espanhol, é melhor substituir as strings existentes no arquivo do idioma espanhol pelas do inglês no arquivo calendar.js. No entanto, existem outros métodos mais simples, você pode encontrá-los no site principal do script ou na comunidade do Github, anexado a este post.
      Além disso, tentarei fazer upload de um novo post em algumas semanas onde explicarei como criar a inserção de eventos no banco de dados.

      José Luis Zamudio (@JoseZami) dito

    Muito obrigado, vou agradecer o post de inserir eventos :)

      jair dito

    olá eu tenho um problema quando eu conserto tudo para conectar e extrair meus dados do banco de dados ele não mostra nenhum evento

      diego dito

    não insere evento no banco de dados

      Gonza dito

    Você poderia postar como inserir eventos? nos campos inicial e final, que tipo de dado é? timestamp? sobraram "0", preciso inserir e poder editar os eventos. Obrigado

      Qui dito

    CRIAR BASE DE DADOS SE NÃO EXISTIR `bootstrap_calendar` / *! 40100 DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci * /;
    USE `bootstrap_calendar`;
    - MySQL dump 10.13 Distrib 5.6.13, para Win32 (x86)
    -
    - Host: 127.0.0.1 Banco de dados: bootstrap_calendar
    - ——————————————————
    - Versão do servidor 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 DEFINIR NOMES 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 * /;

    -
    - Estrutura da tabela para `eventos` da tabela
    -

    DROP TABLE SE EXISTE `eventos`;
    / *! 40101 SET @saved_cs_client = @@ character_set_client * /;
    / *! 40101 SET character_set_client = utf8 * /;
    CREATE TABLE `eventos` (
    `id` int (10) unsigned NOT NULL AUTO_INCREMENT,
    `title` varchar (150) COLLATE utf8_spanish_ci DEFAULT NULL,
    texto `body` COLLATE utf8_spanish_ci NOT NULL,
    `url` varchar (150) COLLATE utf8_spanish_ci NÃO NULO,
    `class` varchar (45) COLLATE utf8_spanish_ci NOT NULL DEFAULT 'info',
    `start` varchar (15) COLLATE utf8_spanish_ci NOT NULL,
    `end` varchar (15) COLLATE utf8_spanish_ci NÃO NULO,
    CHAVE PRIMÁRIA (`id`)
    ) ENGINE = InnoDB DEFAULT CHARSET = utf8 COLLATE = utf8_spanish_ci;
    / *! 40101 SET character_set_client = @saved_cs_client * /;

    -
    - Dumping de dados para a tabela `eventos`
    -

    BLOQUEAR TABELAS `eventos` ESCREVER;
    / *! 40000 ALTER TABLE `events` DISABLE KEYS * /;
    / *! 40000 ALTER TABLE `events` ENABLE KEYS * /;
    DESBLOQUEAR TABELAS;
    / *! 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 * /;

    - Despejo concluído em 2014/05/31 14:38:23

      juan77 dito

    Olá, migos, existe alguma maneira de alterar o formato de data JSON

      Giselabra dito

    O calendário é muito bom, só ao adicionar um novo evento a data que leva por padrão tanto no início quanto no final está no formato inglês, como faço para mudar para espanhol? Seria DD / MM / AAAA. Muito obrigado e saudações

      Fabiano dito

    Olá, o calendário é muito bom, mas ao atualizar uma data não é refletido imediatamente no calendário. Que posso fazer ?

    Estou com outro problema também, como faço para visualizar todos os pontos na visualização mensal, é possível ampliar o quadrado? o que corresponde a um dia?

      Alex dito

    Tenho o problema de que localmente ao carregar o exemplo funciona perfeitamente, mas quando faço upload para um servidor online não me mostra nada do calendário apenas os botões. Alguma ideia do que pode ser ou o que está errado com o servidor para consertar por favor.