Convert PHP/Javascript to Widget

I’m going to preface this by saying I am new to WordPress development, and have never had to use AJAX or JQuery, which if what I have read is correct, this should be able to be accomplished with. The calendar works perfectly outside of WordPress, but I have trouble when I try to convert it to a widget.

The calendar moves between months fine, but when I click the previous on next month button, it loads a copy of the page where the widget should be, so I basically have 2 copies of the page loaded. Any help is appreciated. Here is the code.

events.php

/*
Plugin Name: Intranet Calendar Plugin Test
Description: Event Plugin for Cheshire Medical Center Intranet
Version: 1.0.0
Author: Mike Dunham at Cheshire Medical Center
License: GPLv2 or later
Text Domain: Cheshire Medical Center
*/

class Calendar_Widget extends WP_Widget {

public function __construct() {
$widget_options = array(
‘classname’ => ‘calendar_widget’,
‘description’ => ‘This is an Event Widget’,
);
parent::__construct( ‘calendar_widget’, ‘Calendar Widget’, $widget_options );
}

public function widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, ‘Calendar Test’ );
echo $args[‘before_widget’] . $args[‘before_title’] . $title . $args[‘after_title’];

wp_enqueue_style( ‘calendar’, plugins_url() . ‘/calendar/calendar.css’,false,’1.1′,’all’);
wp_enqueue_script(‘calendar’, plugins_url() . ‘/calendar/calendar.js’, array(‘jquery’), null, true);

if (isset($_GET[“newmonth”])) {
$month = $_GET[“newmonth”];
$month = $month + 1;
$day = 1;
$year = $_GET[“newyear”];
$newdate = mktime(0,0,0,$month,$day,$year);
$displaymonth = date(“F”, $newdate);
$displayyear = date(“Y”, $newdate);
$linkmonth = date(“m”, $newdate);
$linkyear = date(“Y”, $newdate);
$current = date(“j”);
$totaldays = date(“t”, $newdate);
} else {
$displaymonth = date(“F”);
$displayyear = date(“Y”);
$linkmonth = date(“m”);
$day = 1;
$linkyear = date(“Y”);
$current = date(“j”);
$totaldays = date(“t”);
}
?>
<div id=”calendardiv”>
<table id=”calendar” border=”1″>
<tr>
<th id=”prevmonth” valign=”center”><button id=”prev” class=”button”> < </button></th>
<th id=”mainhead” colspan=”5″><?php echo $displaymonth . ” ” . $displayyear; ?></th>
<th id=”nextmonth” valign=”center”><button id=”next” class=”button”> > </button></th>
</tr>
<tr>
<th id=”header”>Sun</th>
<th id=”header”>Mon</th>
<th id=”header”>Tue</th>
<th id=”header”>Wed</th>
<th id=”header”>Thu</th>
<th id=”header”>Fri</th>
<th id=”header”>Sat</th>
</tr>
<tr>
<?php
$first = date(“w”, mktime(0,0,0,$linkmonth,$day,$linkyear));
$ctr = 1;
$ctrcells = 0;
for ($i=0; $i<$first; $i++) {
echo “<td class=’nil’></td>”;
}
for ($i=$first; $i<=6; $i++) {
if ($ctr == $current) {
echo “<td class=’today’><a href=’#’>$ctr</a></td>”;
}else{
echo “<td class=’day’><a href=’#’>$ctr</a></td>”;
}
$ctr++;
}
echo “</tr><tr>”;
while ($ctr <= $totaldays) {
if ($ctr == $current) {
echo “<td class=’today’><a href=’#’>$ctr</a></td>”;
}else{
echo “<td class=’day’><a href=’#’>$ctr</a></td>”;
}
$ctrcells++;
if ($ctrcells == 7) {
echo “</tr><tr>”;
$ctrcells = 0;
}
$ctr++;
}
if ($ctrcells <> 0) {
for ($i=$ctrcells; $i<7; $i++) {
echo “<td class=’nil’></td>”;
}
}

?>

</tr>
</table>
<input type=”hidden” name=”currentmonth” id=”currentmonth” />
<input type=”hidden” name=”currentyear” id=”currentyear” />
</div>

<?php

echo $args[‘after_widget’];
}

public function form( $instance ) {
$title = ! empty( $instance[‘title’] ) ? $instance[‘title’] : ”;
?>
<p>
<label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”>Title:</label>
<input type=”text” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” value=”<?php echo esc_attr( $title ); ?>” />
</p>
<?php
}

public function updatecalendar( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance[ ‘title’ ] = strip_tags( $new_instance[ ‘title’ ] );
return $instance;
}

}

function register_calendar_widget() {
register_widget( ‘Calendar_Widget’ );
}
add_action(‘widgets_init’, ‘register_calendar_widget’);

register_activation_hook( __FILE__, ‘activate_cheshire_calendar_plugin’ );
//register_deactivation_hook( __FILE__, ‘deactivate_staff_directory_plugin’ );
register_uninstall_hook(__FILE__, ‘uninstall_cheshire_calendar_plugin’);

function activate_cheshire_calendar_plugin() {

}

function uninstall_cheshire_calendar_plugin() {

}

function calendar_admin_menu_option() {
add_menu_page(‘CMC Calendar Test’, ‘CMC Calendar Test’, ‘manage_options’, ‘calendar_admin_menu’, ‘calendar_scripts_page’, ”, 200);
//add_submenu_page(‘directory_admin_menu’, ‘Add/Edit Location’, ‘Add/Edit Location’, ‘manage_options’, ‘directory_add_location’, ‘directory_location_page’);
}
add_action(‘admin_menu’, ‘calendar_admin_menu_option’);

function calendar_scripts_page() {
global $wpdb;

echo “<h2>CMC Calendar Test Plugin</h2>”;
}

calendar.js

document.getElementById(‘prev’).addEventListener(‘click’, getPrevmonth);
document.getElementById(‘next’).addEventListener(‘click’, getNextmonth);

function getPrevmonth(e) {
e.preventDefault();

var currentmonth = document.getElementById(‘currentmonth’).value;
var currentyear = document.getElementById(‘currentyear’).value;

if (currentmonth) {
if (currentmonth == 0) {
var newmonth = 11;
var newyear = currentyear-1;
} else {
var newmonth = Number(currentmonth) – 1;
var newyear = currentyear;
}
} else {
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();

if (month == 0) {
var newmonth = 11;
var newyear = year-1;
} else {
var newmonth = month – 1;
var newyear = year;
}
}

var newcal = new XMLHttpRequest();
newcal.open(‘GET’, ‘?newmonth=’+newmonth+’&newyear=’+newyear, true);

newcal.onload = function() {
document.getElementById(‘calendardiv’).innerHTML = this.responseText;
document.getElementById(‘currentmonth’).value = newmonth;
document.getElementById(‘currentyear’).value = newyear;
document.getElementById(‘prev’).addEventListener(‘click’, getPrevmonth);
document.getElementById(‘next’).addEventListener(‘click’, getNextmonth);
}

newcal.send();
}

function getNextmonth(e) {
e.preventDefault();

var currentmonth = document.getElementById(‘currentmonth’).value;
var currentyear = document.getElementById(‘currentyear’).value;

if (currentmonth) {
if (currentmonth == 11) {
var newmonth = 0;
var newyear = Number(currentyear) + 1;
} else {
var newmonth = Number(currentmonth) + 1;
var newyear = currentyear;
}
} else {
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();

if (month == 11) {
var newmonth = 0;
var newyear = year+1;
} else {
var newmonth = month + 1;
var newyear = year;
}
}
var newcal = new XMLHttpRequest();
newcal.open(‘GET’, ‘?newmonth=’+newmonth+’&newyear=’+newyear, true);

newcal.onload = function() {
document.getElementById(‘calendardiv’).innerHTML = this.responseText;
document.getElementById(‘currentmonth’).value = newmonth;
document.getElementById(‘currentyear’).value = newyear;
document.getElementById(‘prev’).addEventListener(‘click’, getPrevmonth);
document.getElementById(‘next’).addEventListener(‘click’, getNextmonth);
}

newcal.send();
}

calendar.css

#calendar {

}

#mainhead {
font-size: 40px;
text-align: center;
}

#prevmonth {
font-size: 40px;
text-align: left;
}

#nextmonth {
font-size: 40px;
text-align: right;
}

#header {
font-size: 30px;
}

.button {
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 30px;
margin: 4px 2px;
cursor: pointer;
}

.nil {
background-color: #f2d7d5;
}

.today {
font-size: 20px;
text-align: center;
background-color: #85c1e9;
}

.today:hover {
background-color: #cd6155;
}

.day {
font-size: 20px;
text-align: center;
}

.day:hover {
background-color: #cd6155;
}

a {
text-decoration: none;
color: black;
}

Read more here:: Convert PHP/Javascript to Widget

Leave a Reply

Your email address will not be published. Required fields are marked *