Solved

Google Calendar in Lightbox

Posted on 2011-09-27
3
791 Views
Last Modified: 2014-11-12
I am trying to embed a Google Calendar into a website. When I click on the link for the calendar I would like for the calendar to come up in a lightbox. Is there any way to do this? I have searched and all of the lightbox info I have found brings me to lightboxes for images.


I have attached the code that I get from Google.

<iframe src="http://www.google.com/calendar/embed?src=name@emailaddress.com&ctz=UTC" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Open in new window

0
Comment
Question by:thebradnetwork
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36713804
using this lightbox for example : http://fancybox.net/howto

YOU MAY NEED TO SHARE YOUR CALENDAR (SET IT TO PUBLIC)
<!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>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" charset="utf-8">
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script language="javascript" type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$("a.iframe").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	})
</script>
</head>
<body>
<a class="iframe" href="http://www.google.com/calendar/embed?src=name@emailaddress.com&ctz=UTC" >DISPLAY MY CALENDAR</a>
</body>
</html>

Open in new window

leakim971-505073.flv
0
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36714036
It works but only if the JQuery code that I have commented out is commented out.
<!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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >  
<head>  

		<link rel="stylesheet" href="css/supersized.core.css" type="text/css" media="screen" />
		
		<link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

		<script type="text/javascript" src="js/bgresize.js"></script>
		
		<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" charset="utf-8">
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script language="javascript" type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
		
		

<!-- <script type="text/javascript">  
		
			jQuery(function($){
				$.supersized({
					slides	:  [ { image : 'images/bg1.jpg' } ]					
				});
			});
</script> -->
			
			
			<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$("a.iframe").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	})
</script>
		
</head>

<body>

<div id="container">
<h1>Adam Romito</h1>
<h2>Bass Gutair // Nashville,TN</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus eleifend neque quis porta. Quisque tortor elit, scelerisque eu fermentum eu, mattis ultrices sapien. Sed varius ligula euismod est sagittis vel condimentum odio blandit. Phasellus sapien odio, laoreet at commodo vel, porta commodo diam. In luctus mauris a leo pharetra eget ornare ligula tristique. Donec sodales faucibus tortor, id porttitor purus lacinia non. In nec lectus urna. Mauris id nulla sem, quis rutrum libero. Etiam elit quam, dignissim laoreet ultricies non, accumsan vitae nunc. Mauris iaculis, libero sed mattis venenatis, enim lectus tincidunt leo, a dignissim elit orci ac libero. Suspendisse justo sapien, commodo sed sodales sed, aliquam at justo. Morbi posuere porttitor cursus. Nam lacus erat, scelerisque tristique tristique commodo, posuere id dui. Morbi luctus libero quis urna semper mollis. Nam in enim et sapien fermentum egestas.
</p>
<div id="addthis">

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e7eab600ce967d9"></script>
<!-- AddThis Button END -->

</div>

<div id="footer">

<img src="images/adamromitosignature.png" name="signature" width="294" height="100" id="signature" />

<div id="navigation">
<ul>
	<li><a href="url">Home</a></li>
	<li><a class="iframe" href="http://www.google.com/calendar/embed?src=www@www.com&ctz=UTC">Calendar</a></li>
	<li><a href="#">Contact</a> </li>
</ul>

</div>

<div id="socialnetworking"></div>

</div>


  
</body>  

</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 36714204
so fix your code, I gave you a simple version and it work as you can see.
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
This Micro Tutorial demonstrates in Google Analytics how to create a custom report that shows you traffic over time using the month of year dimensions. There are also instructions on how to fix Google's odd month of year formatting, which Microsoft …
This Micro Tutorial will demonstrate Google Calendar to monitor updates with top sites, such as Facebook, Google, Twitter, etc. with Marketing News. Each update of Google Calendar can be monitored, correlate dips and spikes in your website traffic, …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question