Popup window when clicking on calendar event

[Mark Ellis]

I'm trying to get the events in a calendar to appear in a popup window, rather than in a new tab. But everything I try results in the calendar itself not appearing.

Calendar is at www.dorsetdog.com/test

The CSS is at calendar.css

The JS is at calendar.js

The events js is at events.js

The clean htm is at calendar.htm

I found this bit of code.

$(document).ready(function() {
   $('#Popup').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'height=900,width=900');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});

But the calendar author said that it would not allow every event to appear in a new popup, so to change (which is around line 380 ish)

elA.setAttribute('href', eventLink);

with

elA.setAttribute('href', 'javascript:;');
        _Event.add(elA, 'click', function() {
             showCalendar(_prevYearMonth(yearmonth));
      var newWin = window.open(eventLink, '', 'height=900,width=900');
      if (window.focus) {
        newWin.focus();
      }
      return false;
        });

And I've got nowhere

Any help appreciated

[coothead]

Hi there Mark Ellis,

I pointed out in this previous thread of yours..

• Help - CSS not changing html - grrrrr

...that...

I was unable to view your page and that "Google" was the probable cause.
There are probably some procedures that you have omitted to do.

Although one member did amusingly write...

Must be just you coothead

...I have since received this information from the "Horse's mouth"...

Work together and share

Our permission settings let you designate owners, viewers and collaborators (meaning they can edit pages) for your site.
And you can make your Google Sites available to just a few people, your entire organization, or the world.

Source:-

• http://www.google.com/sites/overview.html

Apart from me, you may risk losing many more potential visitors by not rectifying this situation.

coothead

[Mark Ellis]

Hi there Mark Ellis,

I pointed out in this previous thread of yours..

• Help - CSS not changing html - grrrrr

...that...



Although one member did amusingly write...



...I have since received this information from the "Horse's mouth"...



Source:-

• http://www.google.com/sites/overview.html

Apart from me, you may risk losing many more potential visitors by not rectifying this situation.

coothead

Coothead, thanks again for your input. I'm not dismissing what you are saying because I said before about people who use Tiscalli/Talk Talk having problem. However, let me assure you that many people can and do visit my site.

There does seem to be an issue with access to various sites, and this seems to be based around where the service provider accesses servers - rather than individuals accessing web addresses.

Thankfully, my site is not a financial site - just an information site

You may be able to access the site by its true name of https://sites.google.com/site/dorsetdogshow/

Google analytics shows the site as having over 400 viewers regularly returning over the dog show season.

[ajfmrf]

I'm trying to get the events in a calendar to appear in a popup window, rather than in a new tab. But everything I try results in the calendar itself not appearing.

Calendar is at www.dorsetdog.com/test

The CSS is at calendar.css

The JS is at calendar.js

The events js is at events.js

The clean htm is at calendar.htm

I found this bit of code.

$(document).ready(function() {
   $('#Popup').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'height=900,width=900');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});

But the calendar author said that it would not allow every event to appear in a new popup, so to change (which is around line 380 ish)

elA.setAttribute('href', eventLink);

with

elA.setAttribute('href', 'javascript:;');
        _Event.add(elA, 'click', function() {
             showCalendar(_prevYearMonth(yearmonth));
      var newWin = window.open(eventLink, '', 'height=900,width=900');
      if (window.focus) {
        newWin.focus();
      }
      return false;
        });

And I've got nowhere

Any help appreciated

I saw your page with the calendar missing-the center area had something about developement and no calendar.And the link to the "clean html" took me to this page-https://sites.google.com/site/dorsetdogshow/calendar.htm?attredirects=0 which was a download for something at google and I was reluctant to use it.

Your links are not trust worthy to me because of the way you posted them as to hide the location(google in this case).

[jscheuer1]

I don't think you can. At least not via javascript. That calendar is in an iframe on a different domain. Javascript doesn't work cross domain.

Essentially what you have is a calendar widget. Unless it allows you to configure that behavior with a parameter that you pass to it somehow, then it's very likely impossible to. I'm sure you've already configured other things about it, colors for instance. Where's the documentation for that? If I had a link to the documentation I might be able to find the option - if it exists that would allow for a new window instead of a new tab.

[Mark Ellis]

John. I have today learnt how to put html, css and js into a Google sites pages without using an iframe. http://support.google.com/sites/bin/...answer=2500646

So the calendar on-line will be coming out of that iframe once I get it working on my laptop. The only problem with this method is that the JS and CSS is all in the same html box as the html code within the Google sites page. (example being the 8 navigations in the centre of http://www.dorsetdog.com/dog-shows-and-showing).

One cannot upload html files into the server direct, and cannot access the HEAD area of any page - hence the need for iframes or html boxes within the Sites pages Basically, everything to one does or links is directly into the BODY

Uploaded 3 of the files, but this forum won't let me upload the html file. So the three attachments are here

events.js calendar.css calendar.js

and the html code is

<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Calendar</title>

<script type="text/javascript" src="calendar.js"></script>
<link rel="stylesheet" href="calendar.css" type="text/css" />

</head> 

<body> 
<script src="events.js" type="text/javascript"></script>

<div id='myCalendarContainer'></div> 

</body> 
</html>

The true address of the dorsetdog.com website is at https://sites.google.com/site/dorsetdogshow/

The original calendar info and code is at http://ilsen.zxq.net/calendar/index.html

The suggested popup code is from http://jquerybyexample.blogspot.com/...new-popup.html

Mark

[jscheuer1]

I was taking a closer look at this and the widget is controlled by:

http://hosting.gmodules.com/ig/gadgets/file/106457770858869818781/calendar.xml

Whose contents are:

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="calendar" />
<Content type="html"><![CDATA[
<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Calendar</title>

<script type="text/javascript" src="https://sites.google.com/site/dorsetdogshow/calendar.js"></script>
<link rel="stylesheet" href="https://sites.google.com/site/dorsetdogshow/calendar.css" type="text/css" />


  </head>
 <body>

<script src="https://sites.google.com/site/dorsetdogshow/events.js" type="text/javascript"></script>

 
  <div id='myCalendarContainer'></div>

</body>

</html>
]]></Content>
</Module>

If you have access to that file, or the javascript files mentioned in it, something could possibly be worked out using javascript.

[jscheuer1]

Putting it in an HTML box as you call it may or may not help. If you cannot add any scripts to the head or body of the page, that doesn't get us anything. If you can add external script tags, or on page script code, and this HTML box is actually code on the page, it could work out.

[Mark Ellis]

Just modified my last post, as uploaded the js and css files to this thread - and copied in the short html code for the calendar.

This page http://www.dorsetdog.com/dog-shows-and-showing uses the html box successfully

The xml file you refer to is the file that I created in order to create the iframe that is currently used by the calendar in the test page - as no one can access the head section of any Google Sites pages. Pain I know, but it is free hosting

[jscheuer1]

Why do you want to add jQuery? None of your pages use it now, at least none that I see. And that page with the HTML box doesn't have a calendar on it.

You seem to imply that you have access to events.js - if so it could be edited to include at the end:

 . . . Description: 'Corfe Castle', 
        eventLink: 'http://www.dorsetdog.com/september-diary#09mgc',
        },
		
		{ eventDate: 20120923, 
        eventDescription: 'Mosterton', 
        eventLink: 'http://www.dorsetdog.com/september-diary#09mos',
        },
				
     ]);
     myCalendar.showCalendar();
(function(){
	var addEvent = (function(){return window.addEventListener? function(el, ev, f){
			el.addEventListener(ev, f, false);
		}:window.attachEvent? function(el, ev, f){
			el.attachEvent('on' + ev, function(){f.call(el);});
		}:function(){return;};
	})();
	function setNew(){
		var events = document.getElementById('myCalendarContainer').getElementsByTagName('a'), i = events.length;
		while(--i > -1){
			if(events[i].target === '_blank'){
				addEvent(events[i], 'click', function(e){
					e = e || event;
					if(e.preventDefault){e.preventDefault();}
					e.returnValue = false;
					window.open(this.href, this.target, 'top=150,left=200,width=600,height=500,scrollbars,resizable');
					return false;
				});
			}
		}
	}
	function makeNew(){setTimeout(function(){setNew();}, 500);}
	addEvent(window, 'load', makeNew);
})();

The browser cache may need to be cleared and/or the page refreshed to see changes.

Oh, BTW - that final red comma in the array of events will cause problems in some browsers, get rid of it