DatePicker statiskais kalendārs ar dienu eventiem

senters · October 13, 2010

Par statisko kalendāru lapā izmantoju šo - DatePicker kalendārs (tips: flat)

Tam esmu uzrakstījis šādu konfigu:

	// DATEPICKER - main calendar
$(document).ready(function()
{
	$('#datepicker').DatePicker(
	{
		flat: true,
		date: '<?php echo $CalendarToday; ?>',
		current: '<?php echo $CalendarToday; ?>',
		calendars: 1,
		starts: 1,
	});
});

Kā panākt, ka nospiežot uz kāda no mēneša datuma, bez lapas pārlādes, tiek ielādēti dati par attiecīgo dienu?

Vizuāls piemērs

Edited October 13, 2010 by senters

October 13, 2010

Tev ar Javascript jānoķer tas notikums, kad ir izvēlēts datums un šis izvēlētais datums jānodod ar ajax kādam php skriptam, kas sameklēs datubāzē datus par šo izvēlēto datumu. Protams tas gadījumā, ja šī kalendāra ieraksti glabājas datubāzē kā tas tipiski ir.

Nedaudz paskatoties šī kalendārīša dokumentāciju, tad datuma izvēles notikumu var noķert ar funkciju onChange().


$('#datepicker').DatePicker(
               {
                       flat: true,
                       date: '<?php echo $CalendarToday; ?>',
                       current: '<?php echo $CalendarToday; ?>',
                       calendars: 1,
                       starts: 1,
                       onChange: function(formated, dates){
	           alert( 'izveeleetais datums: ' + formated );
	        }

               });

Iespējams šādi varētu dabūt izvēlēto datumu.

senters · October 13, 2010

Jā, dati ir datubāzē - events tabulā, kur ir visi notikumi. Tie tiks meklēti pēc sākuma datuma. Tūlīt pamēģināšu Tavu variantu.

Labots: Tagad tiek izmests alerta veidā -> izveeleetais datums: 2010-10-15 utt klikojot pa kalendāra datumiem.

Jāturpina ir ideja tālāk, tagad jāraksta fails ar selektu kurš meklē eventu tabulā visus notikumus pēc padotā datuma: 2010-10-15

Kā to pareizi būtu iebarot tajā kalendāra konfigā?

***

DB: (tabula) events (kolonna) start_date (vērtība) "15.10.2010"

Fails: calendar_events.php

<?php
$formated = $_POST['formated'];

$sql = mysql_query("SELECT * FROM  event WHERE date_start = '".$formated."'");
while($row = mysql_fetch_assoc($sql))
{
	$EventName = $row['name'];
}
?>

Un, jā, tagad kalendārs atgriež šāda paša formāta datumu: izveeleetais datums: 15.10.2010

Edited October 13, 2010 by senters

October 13, 2010

$.post("skripts.php", { datums: formated },
  function(data){
    //te sāksies skripts.php atgriezto datu apstrāde
  }, "json");

šādi var izmantojot jQuery nodot datumu php skriptam, kas sameklēs notikumus caur POST padotajā datumā un rezultātus atgriezīs json formātā. šo kodu loģiski ka jāliek onChange funkcijā.

skripts.php paņem no $_POST['datums'] datumu un izvelk notikumus šajā datumā no DB. pēc tam izvada rezultātu json formātā, vēlams izmantotjot funkciju json_encode().

EDIT

šajā konkrētajā gadījumā

$.post("calendar_events.php", { formated : formated },
  function(data){
    //te sāksies skripts.php atgriezto datu apstrāde
  }, "json");

<?php
       $formated = $_POST['formated'];
       $data = array();
       $sql = mysql_query("SELECT * FROM  event WHERE date_start = '".$formated."'");
       while($row = mysql_fetch_assoc($sql))
       {
               $data[] = $row['name'];
       }

       echo json_encode($data);
?>

Edited October 13, 2010 by 101111

senters · October 13, 2010

Es iesāku šādi rakstīt:

	$(document).ready(function()
{
	$('#datepicker').DatePicker(
	{
		flat: true,
		date: '<?php echo $today; ?>',
		current: '<?php echo $today; ?>',
		calendars: 1,
		starts: 1,
		format: 'd.m.Y',
		onChange: function(formated, dates)
		{
           	alert( 'izveeleetais datums: ' + formated );

			$.ajax(
			{
				type: "POST",
				url: "Includes/calendar_events.php",
				data: formated,
				success: function(html)
				{
					$(".EventList").after(html);
				}
			});
           }
	});
});

un SQL selekts:

<?php

require("../Functions/conection.php");

$formated = $_POST['formated'];

$sql = mysql_query("SELECT * FROM  event WHERE date_start = '15.10.2010'");
while($row = mysql_fetch_assoc($sql))
{
	$EventName = $row['name'];

	echo $EventName;
}
?>

October 13, 2010

Ā, nu var arī tā, ja grib. Man vienkārši labāk patīk datu apstrāde json formātā.

Un šis te skripts strādā?

senters · October 13, 2010

Tā, nepamanīju Tavu jaunāko posta labojumu, būšu pārgājis uz Tevis minēto kodu, redzēs kas sanāk.

Mans kods atgriež datus lapā, bet ja spiež vēlreiz uz tā paša datuma tad vecie tiek paturēti un klāt nāk jaunie rekordi izselektējot.

"Un šis te skripts strādā?"

-- Tūlīt pārbaudu... redzēs

Edited October 13, 2010 by senters

senters · October 13, 2010

Tā, netiek nekas atgriezts ar Tavu doto kodu, jo manuprāt nav norādīta vieta (id/klase) kur tiks izmesti dati:

$(document).ready(function()
{
	$('#datepicker').DatePicker(
	{
		flat: true,
		date: '<?php echo $today; ?>',
		current: '<?php echo $today; ?>',
		calendars: 1,
		starts: 1,
		format: 'd.m.Y',
		onChange: function(formated, dates)
		{
           	                // test msg
                               alert( 'izveeleetais datums: ' + formated );

			/*
			$.ajax(
			{
				type: "POST",
				url: "Includes/calendar_events.php",
				data: formated,
				success: function(html)
				{
					$(".EventList").after(html);
				}
			});
			*/
			$.post("Includes/calendar_events.php", { formated : formated },
		   	function(data){
			//te sāksies skripts.php atgriezto datu apstrāde
		   	}, "json");
           }
	});
});

Es savu variatu piekomentēju, bet es vismaz norādīju, ka datus jāmet .EventList divā, bet kā jau teicu tad manam variantam ir problēma, ka pie vēlviena izvēlēta datuma vecais ieraksts paliek un klāt pieliek jauno :(

Edited October 13, 2010 by senters

October 13, 2010

Ja tavs variants pareizi atgriež notikumus izvēlētajā datumā tad izmanto to. Ja atgrieztie notikumi jāsaliek .EventList kastē, tad pirms to darī šī kaste ir jāiztukšo

$(".EventList").empty();
$(".EventList").html(html);

senters · October 13, 2010

Tiks labots mans variants un provēts vēlreiz.

p.s.

Aizraujoši šodien sekot līdzi Čīles mineriem LIVE - http://www.msnbc.msn.com/id/21134540/vp/39632101#39632101

--

Ar šādu konfigu nu jau strādā labāk:

$(document).ready(function()
{
	$('#datepicker').DatePicker(
	{
		flat: true,
		date: '<?php echo $today; ?>',
		current: '<?php echo $today; ?>',
		calendars: 1,
		starts: 1,
		format: 'd.m.Y',
		onChange: function(formated, dates)
		{
           	alert( 'izveeleetais datums: ' + formated );
			$.ajax(
			{
				type: "POST",
				url: "Includes/calendar_events.php",
				data: "formated="+ formated,
				success: function(html)
				{
					//$(".EventList").after(html);
					$(".Event").empty();
					$(".EventList").html(html);
				}
			})
           }
	});
});

Pa lielam viss ir tieši kā vajag, arī nedublējas pie jauniem datumiem.

Edited October 13, 2010 by senters

senters · October 13, 2010

Jauna vajadzība parādijusies šeit:

Kalendārā gribu izcelt datumus ar <b></b> kuros jau eksistē kāds pasākums, tas lai vieglāk users redz, vai ir vērts vispār spiest virsū un skatīties kas ir konkrētajā dienā par notikumu viņa kalendārā.

Kā to panākt?

Леший · October 14, 2010

Iekš tā paša query vai nu piejoino, vai ar subquery paņem notikumu skaitu konkrētā datumā, piemēram

SELECT e.*, (SELECT count(*) FROM pasakumi WHERE date = e.date_start) as cnt FROM  event.e  WHERE e.date_start = '15.10.2010'

Tad šo visu atgreiž ar json. Klienta pusē ērtāk izmantot $.getJSON(). Callbackā ciklē masīvu un čeko cnt.

Edited October 14, 2010 by Леший

senters · October 14, 2010

ar JSON nav bijusi gandrīz nekāda darīšana. varbūt vari nedaduz detalizētāk palīdzēt ar šo gadījumu?

Леший · October 14, 2010

skaties PHP funkciju json_encode() un jQuery metodi $.getJSON().

senters · October 14, 2010

Nu diez vai es uzreiz sapratīšu kā šajā gadījumā strādātu. Tādēļ jau prasīju, lai uzraksti (viss patreizējais kods ir šeit nopostots)

-- Vai kāds varētu pieslēgties šai problēmai un izpalīdzēt? Par pamatu var ņemt jau šeit iemesto kodu

Edited October 15, 2010 by senters

senters · October 15, 2010

Atvainojos par dubultpostu. Gribētu šo lietu arī safixot, savādāk neērti, ka jāspaida pa visu kalendāru, lai zinātu kurā datumā ir kāds events.

Sign In

DatePicker statiskais kalendārs ar dienu eventiem

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites