Jump to content
Sign in to follow this  
cabaçonophp

Mostrar dados do evento no fullcalendar

Recommended Posts

boa noite, criei um calendário mas não consigo fazer um evento onclick para mostrar os detalhes da nota (estou chamando de eventos no projeto).

o meu código abaixo utiliza o vetor $eventos para popular todo o calendário com os eventos.

<script>
       $(document).ready(function() {	
           	
          $('#calendario').fullCalendar({
              header: {
                    left: '',
                    center: 'prev, title, next',
                    right: ''
                },
                defaultDate: '2016-10-18',
                editable: true,
                eventLimit: true,
                eventSources: [{
	                       events: [<?php echo $eventos;?>],
                			color: '#2089cf',    
                			textColor: '#fff' // an option!
                  		}]

             
    			});	

         }); 

    </script>

Share this post


Link to post
Share on other sites

O que tem dentro desse cara?

<?php echo $eventos;?>

Exiba ele individualmente, verifice o sua aba console do navegador.

Da uma olhada nessas paginas.

(Bem parecido com seu contexto)

https://fullcalendar.io/docs/event_data/events_json_feed/

https://fullcalendar.io/docs/event_data/events_array/

Outra sacada legal é a partir do array certinho*.

Você criar utilizando esse carinha aqui:

http://php.net/manual/pt_BR/function.json-encode.php

certinho*. =

Ex:

Entrada:

//Seria o retorno do Banco de Dados (um evento especifico por exemplo...

//SELECT title, start, end FROM eventos where id = 11;
$datas = array(
	'title' => 'event2',
	'start' => '2010-01-05',
	'end'	=> '2010-01-07'	
);
echo json_encode($datas);

Saída:

//JS
{
	title : 'event2',
	start : '2010-01-05',
	end   : '2010-01-07'
} 

Bons estudos.

Share this post


Link to post
Share on other sites

opa gabriel...vlw...agora que vi sua resposta.

Dentro do

<?php echo $eventos;?>

retorna uma string que carrega exatamente todos os eventos, seguindo a configuração para apresentar no callendar:

{title:'Cliente - Ruy Software / Projeto - licenciamento / Nf - 31 / Valor NF - 5000.000 / Valor Depósito - 4692.500',start:'2016-10-18'}

Isso esta perfeito, só que não sei como criar um javascript para abrir os eventos. Ainda não entendi se estou gerando o array eventos de forma muito errada e isso não permite apresentação...ou se é minha total falta de conhecimento no js.

Share this post


Link to post
Share on other sites

Pela documentação, parece haver forma mais simples de fazer sem ter de usar o pedido AJAX, mas aqui fica um exemplo, seguindo a lógica do gabrieldarezzo:

$(document).ready(function() {
  var appointments = new Array();
  loadCalendar();

  function loadCalendar() {
    $.ajax({
      url: "events.php",
      type: "POST",
      dataType: "json",
      success: function(data) {
        $.each(data, function(index, item) {
          appointments.push(item);
        });

        $("#calendar").fullCalendar({
          displayEventEnd: true,
          timeFormat: "H:mm",
          events: appointments
        });
      },
      error: function(errObj, textStatus, errorThrown) {
        console.log(errObj, textStatus, errorThrown);
      }
    });
  }

Estrutura do events.php (para teste):

<?php
  $events = array(
    array("title" => "Cliente - Ruy Software / Projeto - licenciamento / Nf - 31 / Valor NF - 5000.000 / Valor Deposito - 4692.500","start" => "2016-11-18"),
    array("title" => "Teste", "start" => "2016-11-04")
  );
  echo json_encode($events);

Output: [{"title":"Cliente - Ruy Software \/ Projeto - licenciamento \/ Nf - 31 \/ Valor NF - 5000.000 \/ Valor Deposito - 4692.500","start":"2016-11-18"},{"title":"Teste","start":"2016-11-04"}]

Exemplo funcional aqui.

Share this post


Link to post
Share on other sites

glr...não to conseguindo entender, desculpe...o que tenho hoje é o calendário preenchido corretamente.

Qualquer evento que eu crie aparece nele.

O ponto é que quero que o evento seja aberto com 1 click.

No exemplo acima, esta com o mesmo problema que eu tenho.

Pela documentação, parece haver forma mais simples de fazer sem ter de usar o pedido AJAX, mas aqui fica um exemplo, seguindo a lógica do gabrieldarezzo:

 Exemplo funcional aqui.

Pelo que pesquisei da para usar uma janela modal (bootstrap) ou ajax ou criar um popup, mas o lance é que o evento não responde com um botão.

vlw!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Rodrigo5468
      Olá, tudo bem? Espero que sim.
       
      Eu seguir esse tutorial e essa atualização para conseguir o código final. Mas o meu site fica totalmente, não exibe absolutamente nada. Eu venho aqui recorrer a vocês, pois lá não irei ter nenhum tipo de suporte. Por favor, quem for me auxiliar com esse pequeno problema, leia o tópico do tutorial. Mas o Fruition é um script para personalizar o domínio utilizando o Notion.
      /* CONFIGURATION STARTS HERE */ /* Step 1: enter your domain name like fruitionsite.com */ const MY_DOMAIN = 'DOMINIO'; /* * Step 2: enter your URL slug to page ID mapping * The key on the left is the slug (without the slash) * The value on the right is the Notion page ID */ const SLUG_TO_PAGE = { '': 'CODIGO_DA_PÁGINA_PÚBLICA_DO_NOTION' }; /* Step 3: enter your page title and description for SEO purposes */ const PAGE_TITLE = ''; const PAGE_DESCRIPTION = ''; /* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */ const GOOGLE_FONT = ''; /* Step 5: enter any custom scripts you'd like */ const CUSTOM_SCRIPT = ``; /* CONFIGURATION ENDS HERE */ const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); addEventListener("fetch", event => { event.respondWith(fetchAndApply(event.request)); }); function generateSitemap() { let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'; slugs.forEach( (slug) => (sitemap += "<url><loc>https://" + MY_DOMAIN + "/" + slug + "</loc></url>") ); sitemap += "</urlset>"; return sitemap; } const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, OPTIONS", "Access-Control-Allow-Headers": "Content-Type" }; function handleOptions(request) { if ( request.headers.get("Origin") !== null && request.headers.get("Access-Control-Request-Method") !== null && request.headers.get("Access-Control-Request-Headers") !== null ) { // Handle CORS pre-flight request. return new Response(null, { headers: corsHeaders }); } else { // Handle standard OPTIONS request. return new Response(null, { headers: { Allow: "GET, HEAD, POST, PUT, OPTIONS" } }); } } async function fetchAndApply(request) { if (request.method === "OPTIONS") { return handleOptions(request); } let url = new URL(request.url); url.hostname = 'www.notion.so'; if (url.pathname === "/robots.txt") { return new Response("Sitemap: https://" + MY_DOMAIN + "/sitemap.xml"); } if (url.pathname === "/sitemap.xml") { let response = new Response(generateSitemap()); response.headers.set("content-type", "application/xml"); return response; } let response; if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) { response = await fetch(url.toString()); let body = await response.text(); response = new Response( body .replace(/www.notion.so/g, MY_DOMAIN) .replace(/notion.so/g, MY_DOMAIN), response ); response.headers.set("Content-Type", "application/x-javascript"); return response; } else if (url.pathname.startsWith("/api")) { // Forward API response = await fetch(url.toString(), { body: request.body, headers: { "content-type": "application/json;charset=UTF-8", "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36" }, method: "POST" }); response = new Response(response.body, response); response.headers.set("Access-Control-Allow-Origin", "*"); return response; } else if (slugs.indexOf(url.pathname.slice(1)) > -1) { const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]; return Response.redirect("https://" + MY_DOMAIN + "/" + pageId, 301); } else { response = await fetch(url.toString(), { body: request.body, headers: request.headers, method: request.method }); response = new Response(response.body, response); response.headers.delete("Content-Security-Policy"); response.headers.delete("X-Content-Security-Policy"); } return appendJavascript(response, SLUG_TO_PAGE); } class MetaRewriter { element(element) { if (PAGE_TITLE !== "") { if ( element.getAttribute("property") === "og:title" || element.getAttribute("name") === "twitter:title" ) { element.setAttribute("content", PAGE_TITLE); } if (element.tagName === "title") { element.setInnerContent(PAGE_TITLE); } } if (PAGE_DESCRIPTION !== "") { if ( element.getAttribute("name") === "description" || element.getAttribute("property") === "og:description" || element.getAttribute("name") === "twitter:description" ) { element.setAttribute("content", PAGE_DESCRIPTION); } } if ( element.getAttribute("property") === "og:url" || element.getAttribute("name") === "twitter:url" ) { element.setAttribute("content", MY_DOMAIN); } if (element.getAttribute("name") === "apple-itunes-app") { element.remove(); } } } class HeadRewriter { element(element) { if (GOOGLE_FONT !== "") { element.append( `<link href='https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(' ', '+')}:Regular,Bold,Italic&display=swap' rel='stylesheet'> <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`, { html: true } ); } element.append( `<style> div.notion-topbar > div > div:nth-child(3) { display: none !important; } div.notion-topbar > div > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(5) { display: none !important; } div.notion-topbar > div > div:nth-child(6) { display: none !important; } div.notion-topbar-mobile > div:nth-child(3) { display: none !important; } div.notion-topbar-mobile > div:nth-child(4) { display: none !important; } div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; } div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; } </style>`, { html: true } ); } } class BodyRewriter { constructor(SLUG_TO_PAGE) { this.SLUG_TO_PAGE = SLUG_TO_PAGE; } element(element) { element.append( `<script> const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)}; const PAGE_TO_SLUG = {}; const slugs = []; const pages = []; const el = document.createElement('div'); let redirected = false; Object.keys(SLUG_TO_PAGE).forEach(slug => { const page = SLUG_TO_PAGE[slug]; slugs.push(slug); pages.push(page); PAGE_TO_SLUG[page] = slug; }); function getPage() { return location.pathname.slice(-32); } function getSlug() { return location.pathname.slice(1); } function updateSlug() { const slug = PAGE_TO_SLUG[getPage()]; if (slug != null) { history.replaceState(history.state, '', '/' + slug); } } function onDark() { el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>'; document.body.classList.add('dark'); __console.environment.ThemeStore.setState({ mode: 'dark' }); }; function onLight() { el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>'; document.body.classList.remove('dark'); __console.environment.ThemeStore.setState({ mode: 'light' }); } function toggle() { if (document.body.classList.contains('dark')) { onLight(); } else { onDark(); } } function addDarkModeButton(device) { const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile'); el.className = 'toggle-mode'; el.addEventListener('click', toggle); nav.appendChild(el); onLight(); } const observer = new MutationObserver(function() { if (redirected) return; const nav = document.querySelector('.notion-topbar'); const mobileNav = document.querySelector('.notion-topbar-mobile'); if (nav && nav.firstChild && nav.firstChild.firstChild || mobileNav && mobileNav.firstChild) { redirected = true; updateSlug(); addDarkModeButton(nav ? 'web' : 'mobile'); const onpopstate = window.onpopstate; window.onpopstate = function() { if (slugs.includes(getSlug())) { const page = SLUG_TO_PAGE[getSlug()]; if (page) { history.replaceState(history.state, 'bypass', '/' + page); } } onpopstate.apply(this, [].slice.call(arguments)); updateSlug(); }; } }); observer.observe(document.querySelector('#notion-app'), { childList: true, subtree: true, }); const replaceState = window.history.replaceState; window.history.replaceState = function(state) { if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return; return replaceState.apply(window.history, arguments); }; const pushState = window.history.pushState; window.history.pushState = function(state) { const dest = new URL(location.protocol + location.host + arguments[2]); const id = dest.pathname.slice(-32); if (pages.includes(id)) { arguments[2] = '/' + PAGE_TO_SLUG[id]; } return pushState.apply(window.history, arguments); }; const open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function() { arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so'); return open.apply(this, [].slice.call(arguments)); }; </script>${CUSTOM_SCRIPT}`, { html: true } ); } } async function appendJavascript(res, SLUG_TO_PAGE) { return new HTMLRewriter() .on("title", new MetaRewriter()) .on("meta", new MetaRewriter()) .on("head", new HeadRewriter()) .on("body", new BodyRewriter(SLUG_TO_PAGE)) .transform(res); }  
      Tem alguma coisa de errado?
    • By Carlos Longo
      Srs Bom dia,
       
      fiz inumeras tentativas para mostrar a imagem com link em:
       <script type="text/javascript"> var imagens =  new Array( '1.jpg', '2.jpg', '3.jpg','4.jpg', '5.jpg', '6.jpg'); var num_img = 6; var img_atual =0; function ChangeImg() { if (img_atual < (num_img - 1) ) { img_atual = img_atual + 1; } else { img_atual = 0; } document["img_apoio"].src = "http://www.ficasimples.com.br/calcfal/prop/" + imagens[img_atual]; var x = setTimeout ("ChangeImg()", 2000); }   </script>  
      ela posteriormente é chamada assim:
      queria que ao clicar na figura fosse chamado o link da figura especifica conforme valor da variavel  imagens[img_atual]/////
      <img name="img_apoio" src="http://www.ficasimples.com.br/calcfal/prop/1.jpg" alt="" border="0"width="190px" height="210px" align="center">  
       
      poderiam me ajudar??
       
      grato
       
      Carlos
    • By RickSilva
      Bom, preciso criar uma funçao que faz uma variavel string ter um valor durante um periodo de 5 segundos e depois outro valor durante os proximos 5 segundos, fazendo isso a todo momento. Por exemplo: Uma variavel cor que tenha como valor "preto" durante 5 segundos e depois receba o valor "branco".  
    • By lezão
      Boa tarde, pessoal!
      Td bem com vcs?
       
      Estou a procura de um JS que me de retorno dos dados selecionados na pagina anterior.
      Eu escolho as minhas opções e qnd eu clicar em confirmar pedido chama outra pagina com os dados q eu selecionei mais os valor total
       
      Veja o código q estou utilizando:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <style type="text/css"> #iconApiWhatsapp{ position: fixed; display: flex; right: 0px; bottom: 0px; z-index: 99999; right: 0px; position: fixed; width: 100%; bottom: 0px; background: rgba(0,0,0,0.8); height: 57px; text-align: center; } #iconApiWhatsapp img{ display: flex; align-items: center; justify-content: center; font-size: 24px; width: 150px; height: 57px; opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */ transition: opacity 0.5s; } #iconApiWhatsapp img:hover{ opacity: 1; filter: alpha(opacity=100); /* For IE8 and earlier */ } </style> </head> <body> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="92%" align="left"><b>PORTUGUESA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td width="8%" align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"> </td> </tr> <tr> <td align="left"><b>A MODA DA CASA</b><br/> Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano.<br/><hr /></td> <td align="center" valign="top"><b>28,00</b><br/> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="hidden" name="vl_sabor" value="28.00"></td> </tr> </table> <br/><br/><br/> <div id="iconApiWhatsapp" class="preco"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" align="lef" onclick="location.href='finalizar_pedido.html'" style="cursor:pointer;"> <font size="5" color="yellow" face="aril tahoma verdana"> Confirmar Pedido</td> <td width="70%" align="center"> <font size="4" color="white" face="arial"><b><span id="resultado"></span></b> <!--Resultado da soma dos checkbox--> <!--Resultado Pegando a Variavel - Resultado checkbox --> </font> </td> <td width="15%" align="right"><a href="javascript:window.history.go(-1)"><<Voltar</a></td> </tr> </table> </div> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(":checkbox").click(function () { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); $("#resultado").text(formatPrice(total)); }); function formatPrice(value, currency = true) { var valor = parseFloat(value); let valorFormatado = null; if(currency) { //Valor com cifrão valorFormatado = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }); } else { //Valor sem cifrão valorFormatado = valor.toLocaleString('pt-BR', { minimumFractionDigits: 2}); } return valorFormatado; } </script> </body> </html>  
       
       
    • By fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.