I have the code for a javascript calendar and it works perfectly as it creates it when the page loads. However I was wondering if it's possible to add events to it. I found a plugin (jQuery) that enables the user to hover over a td with class "event" and an event will be displayed. So since this calendar will not be used by me but by someone else who knows nothing about developing I was wondering if there is a way to make a php file or upload or something so she can upload the event. I mean, let's say she wants an event on the 3rd then she uploads a file php reads it and tells javascript to add the class "event" that date and jQuery does the rest. Is it possible? I can't even figure out how to do it and I really hope I explained myself. Here's my javascript btw.
function buildCal(){
var d = new Date();
var month = d.getMonth()+1;
var year = d.getFullYear();
var monthName=['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
var daysInMonth=[31,0,31,30,31,30,31,31,30,31,30,31];
var objectDay = new Date(year, month-1, 1); //fix date bug when current day is 31st
objectDay.od=objectDay.getDay()+1; //fix date bug when current day is 31st
var todaydate=new Date()
var scanfortoday=(year==todaydate.getFullYear() && month==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added
daysInMonth[1]=(((objectDay.getFullYear()%100!=0)&&(objectDay.getFullYear()%4==0))||(objectDay.getFullYear()%400==0))?29:28;
var t='<div class="main"><table class="main" cols="7" cellpadding="0" border="0" cellspacing="0">';
t+='<h3 class="monthCSS" align="center">'+monthName[month-1]+' - '+year+'</h3><tr align="center">';
for(s=0;s<7;s++)t+='<td class="daysofweek">'+"DoLuMaMiJuViSa".substr(s*2,2)+'</td>';
t+='</tr><tr align="center">';
for(i=2;i<=42;i++){
var x=((i-objectDay.od>=0)&&(i-objectDay.od<daysInMonth[month-1]))? i-objectDay.od+1 : ' ';
if (x==scanfortoday)
x='<td class="today">'+x+'</td>'
t+='<td class="days">'+x+'</td>';
if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
}
return t+='</tr></table></div>';
}
Something else, as you can see here, it adds blankspaces until it gets to an actual date. I was trying to make it check if(x was not a number) then add a td class="padding" however to do this I was trying to use x.match(/[0-9]+/) but it didn't seem to work and it would also be the first time I try to use regex with javascript would anyone know why is that wrong? or how to actually check for it?
Edit
Something odd is happening with this script and I don't know why, I tried to change from
t+='<td class="days">'+x+'</td>';
to
t+='<td class="days' + x +'">'+x+'</td>';
this, so I could select each td, but when I do this a new td is generated which contains
<td id="days<td class=" today="">1</td>
I have NO idea why this happens, I just know it is messing with the code because afterwards I get a "> printed (because of quotes mis-match caused by this new td...why is this happening?
The calendar systems I've created use a full php array of the month. so that you can iterate over it and for every corresponding blank day table cell there is a blank array for the day.
e.g.
$calendar_dates = array(
[week_1] = array(
[sun] = Null
[mon] = NULL
[tue] = array(
[events] = array(
event_id => 'event name'
event_name => ''
event_time => ''
)
[wed]
...
)
[week_1] => array()
...........
)
I build the days array by just creating an array from the specified date and current week
then I hit the databse to get events in that range
then cycle through the events and attatch them to the calendar array.
works like charm.
To get it to work with javascript just have it echo some specific javascript in the head of the html file that control the opening and closing of the calendar days.
give you client a simple login page to input/edit events in a webform.
It sounds like you're wanting to push event data from the server to your webpage containing the calendar. While this is possible, it's difficult and generally not worth the effort. You would be better off building some AJAX into your calendar and polling the server for event updates every 5 or 10 minutes or so. This will introduce some delay between when new events are uploaded and when they display on the calendar, but will be much easier to develop.
Related
Nestable tree structure handle with left and right value
I already done the functionality of add parent node, child node and delete node.
But How to save tree value after moving nodes drag and drop with the nestable.js
Lest see my output what I want to do....
i want to manage with data-left, data-right values
And my database structure is
Please help in this how to manage drag and drop functionality.
I tried to comment this, but the website tells me I need 50 Reputation in order to do so, so this may or may not answer your question, I'd have to wait until I got home when I could fiddle with something similar in database / Javascript structure.
I'm fairly familiar with left/right_id tables and such. The first place I saw them was in phpBB3.0 and I spent a whole lot of time reading up on them.
One thing you could do to help you expedite your queries is to add a parent_id column, this way you can immediately get ALL the child notes without having to use "left_id > 1 AND right_id < 8" in your SQL statements.
Now, for your javascript question, how I will try to go about this when I get home is to declare an array of id keys => child values. So, in the screenshot example you've given above you could hopefully get to something like this
array(
2 => array(
5 => array(
3
),
6
),
3 => array(
8
),
4
)
In order to get this you'd have to loop through the DOM for each member of the list, using their id's and the array.push function to add values as necessary.
I'll try and help more once I can get to my house where I have a PHP server setup, but this should give you an Idea of how to get it started.
Are you using any Javascript framework (such as MooTools, jQuery)?
Edit:
So, I've worked on it for quite some time and I've got a general thing working. Below is the code directly responsible for looping through the DOM tree and assigning left/right_id values. It should be fairly easy to edit it for your liking.
I have a preference for MooTools, so I wrote this using the mootools library (it offers some Element features that are quite nice and in fact gave me a multi-level drag and sort tool to test this with). If you prefer to use another library, it should be fairly easy to switch the code to work for it, but I do not use jQuery so I am unfortunately not helpful in that regard
Link to download all files involved: Here
function calculate_ids(el,left_id, parent_id){
var el = $(el);
//makes the element a MooTools Element
var left_id = left_id || 1;
//If left_id is given, we are using this function recursively
var parent = parent_id || 0;
//Gives us a quick method in order to figure out what level we are currently on
var id_array = {};
/*ID array object will look like
{
1:{
'left_id':1,
'right_id':2,
'parent':0
},
2:{
'left_id':3,
'right_id':6,
parent_id:0
},
3:{
'left_id':4,
'right_id':5
},
etc.
}
*/
var els = el.getChildren('li');
//Get the immediate children
els.each(function(child){
var id = child.get('id');
//The ID
var descendants = child.getElements('li');
//Gets ALL most descendent children that match the format, these are ordered the way they are in the DOM
var right_id = left_id + descendants.length * 2 + 1
id_array[id] = {
'left_id':left_id,
'right_id':right_id,
'parent':parent
};
if(descendants.length > 0){
//There are child elements to this thing, recursion!
id_array = Object.merge(id_array, calculate_ids( child.children[0], left_id + 1, id) );
}
left_id = right_id + 1;
//Increment the left_id counter
});
return id_array;
}
Known Issues
The example code I posted doesn't correctly calculate the left/right ids after they've been calculated a first time or moved up/down a level if they were calculated previously. I'm guessing this has something to do with how the multi-level sort class moves the items around. This code is meant to serve as a starting point. I'm really busy (unfortunately), so I may or may not be able to fix this issue in the future, but either way this code should serve as a great starting point.
I have created pagination item by CodeIgniter pagination library with following code:
echo $this->pagination->create_links()
Everything is working well.
Now i want to load data by ajax and i have done already ajax part. But problem is to make clicked item as a current item and to arrange link for current item as it is no longer current.
Suppose i have a pagination as following:
[1] 2 [3] [4] [5] [6] [>] [Last >]
Now 2 is current item and 4 is clicked item.
I have checked CodeIgniter Pagination library, but it doesn't have any option to enable or disable current page link. Is it possible to have current page link without modifying the library?
Thanks in advance.
I take it all back. The Pagination library will need to be changed.
https://github.com/EllisLab/CodeIgniter/blob/develop/system/libraries/Pagination.php
Line 560
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close
Will need to be replaced with
$append = $this->prefix.$i.$this->suffix;
$output .= $this->num_tag_open.'<a href="'.$this->base_url.$append.'"'.$attributes.$this->_attr_rel('start').'>'.$loop.'</a>'.$this->num_tag_close;
That should do it.
You don't need to modify anything on server side. just use plain old vanila jquery.
Here's how to do it.
Let's say i wrapped the links in a <div id="pagination"></div>
Now, to call ajax, use jQuery(body).on('click','#pagination a', function(e){....}).
Here in this code, jQuery(this) will refer to the link that was clicked.
Next, after successful call, remove the active (or any other class that is given ) from all the links. like jQuery('#pagination a').removeClass('active').
Next, if you still remember, jQuery(this) still refered to the current clicked item. (better save it as var current = jQuery(this) at the start of the clicked even so that the reference does not change. Now, just add the class. jQuery(current).addClass('active')
You are done! No need to do anything fancy anything in server side. Sometimes client side is enough.
P.S. i forgot how CI renders the pagination links. if you give the links, i can write the actual code.
var_dump($this->pagination); everything is inside
then if you check Pagination.php library you have these params available too:
var $cur_tag_open = '';
var $cur_tag_close = '';
so try calling them when initializing pagination
$pagination['cur_tag_open'] = '<span class="current-link">';
$pagination['cur_tag_close'] = '</span>';
$this->pagination->initialize($pagination); //now current link should be wrapped into the <span class="current-link"></span>
I don't believe you need to change anything in the Pagination library. You just need to use the uri_segment() function.
The Pagination library takes an argument as follows:
$config['uri_segment'] = 5;
The default value is 3. [Use a value that will work with your URI structure].
This variable is used along with the uri_segment() function to determine the current page, in the latest version of CodeIgniter 2.1.4 you will find it starting on line 142 in the Pagination.php library.
The appropriate uri_segment for the page identifier could be calculated as follows, if using a URI like this one: http://example.com/controller/function/page/20 then you can get the current page as follows,
$page = $this->uri_segment(4);
Hope that helps.
You really dont need to change anything.
Once you have your automatic page set
$page = 2 // Page should be set automatically
Now try this
$config["cur_page"] = $page;
I am getting a Google Calendar XML Feed with the following code.
My problem is I have 'singleevents=true' set in the URL yet when I actually look at the feed it is showing 24 entries and only one of these is unique, whereas the rest are all a repeat of one event.
In my calendar I have 1 single event and 6 events which each recur weekly.
$api = new clApi('http://www.google.com/calendar/feeds/' . $calendarID .'/public/full?singleevents=true&min-start=' . $now . '&max-start=' .$next_week);
if ($feed = $api->parse()) {
foreach($feed->get('entry') as $entry) {
.....
Is there something I'm doing wrong here?
I think you have the syntax for the parameter backwards. According to the documentation at https://developers.google.com/google-apps/calendar/v2/reference#Parameters : "Valid values are true (expand recurring events) or false (leave recurring events represented as single events). Default is false."
I'm setting up an app using FullCalendar (http://arshaw.com/fullcalendar/) that will allow the user to see client scheduling information as well as schedule clients through a management interface.
I want to use a MySQL database to populate an array, and then pass that array in the form of a JSON feed to FullCalendar on an HTML page. Ideally, then, the client information would show up on the HTML page. However, even though my JSON feed is being passed, there are no events on my FullCalendar.
Example JSON feed being passed:
[{"title":"Watson","start":"1333976400","end":"1333980000","allDay":false}]
I'm fairly new to these languages and I would not be surprised if this mistake turn out to be simple.
I would deeply appreciate any help or insight on having these events show up. When I manually feed an array into FullCalendar, it does show the events, but so far my JSON feed has resulted in no information being displayed.
Thank you
For reference:
HTML:
$(document).ready(function() {
$('#calendar').fullCalendar({
events: '/json-events.php'
});
});
PHP:
while ($record = mysql_fetch_array($result)) {
$event_array[] = array(
'id' => $record['id'],
'title' => $record['title'],
'start' => $record['start_date'],
'end' => $record['end_date'],
'allDay' => false
);
}
echo json_encode($event_array);
So the problem, for those searchers that come after me, was that my PHP file had HTML head and body tags. I'm a PHP noob and so I didn't know that would cause it not to work. In order for FullCalendar to display the JSON feed, it must ONLY have PHP code, no HTML. JSONLint.com was invaluable in figuring that out.
I set up a quick example and didn't have any trouble getting this to work:
PHP:
<?php
$record[0]["title"]="Test 1";
$record[1]["title"]="Test 2";
$record[2]["title"]="Test 3";
$record[0]["start_date"]="1333976400";
$record[1]["start_date"]="1333976401";
$record[2]["start_date"]="1333976402";
$record[0]["end_date"]="1333980000";
$record[1]["end_date"]="1333980001";
$record[2]["end_date"]="1333980002";
$record[0]["id"]="1";
$record[1]["id"]="2";
$record[2]["id"]="3";
for ($i=0; $i<3; $i++) {
$event_array[] = array(
'id' => $record[$i]['id'],
'title' => $record[$i]['title'],
'start' => $record[$i]['start_date'],
'end' => $record[$i]['end_date'],
'allDay' => false
);
}
echo json_encode($event_array);
exit;
?>
HTML:
events: '/events.php'
Sample output from the PHP script:
[{"id":"1","title":"Test 1","start":"1333976400","end":"1333980000","allDay":false},{"id":"2","title":"Test 2","start":"1333976401","end":"1333980001","allDay":false},{"id":"3","title":"Test 3","start":"1333976402","end":"1333980002","allDay":false}]
So given that the above works for me and it's really no different to what you have above, you might need to check that the PHP script is actually getting called correctly. Check the Javascript console in Mozilla Firefox or Google Chrome to see if there are any errors thrown when Fullcalendar tries to load the events. Check your web server access/error logs for any mention of the PHP script.
events: '/json-events.php'
should be either
events: './json-events.php'
or
events: 'json-events.php'
Let me know if this helps...
EDIT
I also noticed that in the Json that your are receiving there is no id in the line. There may be something going on between the nameing of you id within the DB comparitively to the name your using in the array. Check it out and see if that is what is going on, because that is one of the properties that are required to pass the event.
EDIT
Try removing the [] from $event_array[] and see what happens... If that doesn't work than I am stumpped... sorry
I think it is a common case:I have three categories: Past, Current, Upcoming.
Now I write a post about next month's event. I put this post in Upcoming category.
What I want is a scheduled category change.
i.e.:
This event runs from Dec 1 to Dec 10. From now till Nov 30, this post is in Upcoming category (I select this category when creating this post).
On Dec 1, this post will be in Current category automatically, till Dec 10.
On Dec 11, this post will be in Past category automatically.
I did a search and did not find such plug-in.
Basically, I want the publishing page to have two extra options:
Option 1: Change to Category _ on _
Option 2: Change to Category _ on _
It sounds like a workflow question. I searched workflow related plugin but still with no luck.
Any suggestion on how to implement this? I can write a plugin but I am new to WP. Could anybody suggest me which API/functions to use?
Thank you!
First off: There could be a plugin out there that can handle what you want to achieve. If you need a simple events calendar, I am almost certain this can be done with existing plugins. Off the top of my head, MyCalendar would be one such plugin. You might want to search the wordpress plugin directory for further options, before you dive into coding this on your own.
That being said, if you can't avoid constructing this yourself, because you're case is to specialized, this should get you started:
Either use custom fields to add the extra meta-data of start and end date or make the events a custom post type of their own. Explaining the use of custom post types en detail is past the scope of a concise SO answer.
If you opt for the simpler way of adding two custom fields called start and end (or the like), you will have to either run a php script as a cronjob via your server or make us of the WP-Cron Functions to compare the current time with the start and end date and change the category accordingly.
To provide you with some useful code (which would go into your self-written plugin), the following php snippet should point you in the right direction:
register_activation_hook(__FILE__, 'your_activation');
add_action('your_daily_event', 'change_categories');
function your_activation() {
$first_time = time(); // you probably want this to be shortly after midnight
$recurrence = 'daily';
wp_schedule_event($first_time, $recurrence, 'your_daily_event');
}
function change_categories() {
$old_name = 'Upcoming'; // category to delete
$taxonomy = 'category';
// fetch category ID (amongst other data) of 'Upcoming':
$term = get_term_by('name',$old_name, $taxonomy);
// fetch all posts in 'Upcoming' category:
$objects = get_objects_in_term($term->term_id,$taxonomy);
// the $objects array now contains the post IDs of all upcoming events
// now, let's loop through them to manipulate:
foreach($objects as $object) {
// get start date:
$key = 'start'; // the name of the custom field
$start = get_post_meta($object, $key, true); // start date
$todays_date = date('Y-m-d'); // get current date
// Assuming, your dates in the custom fields are formatted YYYY-MM-DD:
if ($start < $todays_date) {
// change category:
$new_name = 'Current';
wp_set_post_terms( $object, $new_name, $taxonomy, false );
}
}
?>
Few notes:
The above would have to be altered for the change from "Current" to "Past", obviously.
It can easily be adapted to include time as well.
The cronjobs should initiate shortly after midnight
$first_time has to be a UNIX timestamp
Check the wordpress function reference for more information on the wp functions used above