Making Visualforce work for all forms of devices is common ask these days .Gone are they days when we used plain old school Visualforce with pageblocks and pageblock tables to present data to the User .
The above lines are embedded in the component Responsive_Calendar_View component and a developer needs to change this line .The definitions of attribute is provided below
In case of any issue inspect your browser console or contact me or leave a comment below .
Hope you liked this and happy coding :)
The number of mobile devices has dramatically increased these days and technology is moving rapidly to mobile devices.Everyone prefers viewing the information on handheld devices along with viewing on desktops and laptops .
Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
There are some cool frameworks out there that ease development of a web page following responsive design patterns .
Some of them I would like to list in case you have not come across them
With little bit of HTML and CSS knowledge you should be able to start .HTML and CSS and JS skills are primary for any framework .
So this blogpost is sharing how to build a responsive calendar using visualforce .
Before beginning thanks to the author serhioromano for amazing blogpost on how to use bootstrap and Jquery to build a responsive calendar .Check his below blog that speaks lot about his work
http://bootstrap-calendar.azurewebsites.net/
Please kindly note the real rock star is serhioromano who has built this .My work is just making it adaptable to Visualforce and force.com platform.
Business Use Case
1)Need a calendar data from custom object and out of box salesforce calendar is not an option then
2)Building a cool client portal with custom Visualforce and need a calendar to show events and tasks
3)Building a public website and would like to show your company events on a calendar .
There are lot more Use cases I am sure you will discover ,having a calendar view of data helps lot.
Solution Approach
1)Reuse existing code library from serhioromano github repo and build an apex javascript remoting class that feeds the JSON data to the calendar api function .
2)Provide flexibility to the developers and Admin so that they can customize the calendar for any Sobject and any field by simple one liner code change .
Demo Link
I have created a public site to host my page for ease of view and please observe the responsiveness of this calendar.
http://webzone-developer-edition.ap1.force.com/webzone/Calendar
Code
The entire code for this can be viewed from my github repository
https://github.com/msrivastav13/Bootstrap_Resposive_Calendar
Also I have unmanaged package from where you can install in your org for playing around
Use this URL to install the package into any organization:
https://login.salesforce.com/ packaging/installPackage. apexp?p0=04t90000000FUls
Note: If you are installing into a sandbox organization you must replace the initial portion of the URL with http://test.salesforce.com
What line of code do I need to change for changing to other objects ?
Before beginning thanks to the author serhioromano for amazing blogpost on how to use bootstrap and Jquery to build a responsive calendar .Check his below blog that speaks lot about his work
http://bootstrap-calendar.azurewebsites.net/
Please kindly note the real rock star is serhioromano who has built this .My work is just making it adaptable to Visualforce and force.com platform.
Business Use Case
1)Need a calendar data from custom object and out of box salesforce calendar is not an option then
2)Building a cool client portal with custom Visualforce and need a calendar to show events and tasks
3)Building a public website and would like to show your company events on a calendar .
There are lot more Use cases I am sure you will discover ,having a calendar view of data helps lot.
Solution Approach
1)Reuse existing code library from serhioromano github repo and build an apex javascript remoting class that feeds the JSON data to the calendar api function .
2)Provide flexibility to the developers and Admin so that they can customize the calendar for any Sobject and any field by simple one liner code change .
Demo Link
I have created a public site to host my page for ease of view and please observe the responsiveness of this calendar.
http://webzone-developer-edition.ap1.force.com/webzone/Calendar
Code
The entire code for this can be viewed from my github repository
https://github.com/msrivastav13/Bootstrap_Resposive_Calendar
Also I have unmanaged package from where you can install in your org for playing around
Use this URL to install the package into any organization:
https://login.salesforce.com/
Note: If you are installing into a sandbox organization you must replace the initial portion of the URL with http://test.salesforce.com
What line of code do I need to change for changing to other objects ?
The above lines are embedded in the component Responsive_Calendar_View component and a developer needs to change this line .The definitions of attribute is provided below
In case of any issue inspect your browser console or contact me or leave a comment below .
Hope you liked this and happy coding :)
ReplyDeleteNice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
best web designers in warangal
best web designing companies in india
Great Article Cloud Computing Projects
DeleteNetworking Projects
Final Year Projects for CSE
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
Hiii...Thanks for sharing Great information....Nice post...Keep move on....
ReplyDeleteSalesforce Training in Hyderabad
Congratulation for the great post. Those who come to read your Information will find lots of helpful and informative tips. Blockchain Services
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteGreat post. I used to be checking constantly this weblog and I am inspired! Extremely useful information specially the ultimate part :) I maintain such info much. I used to be seeking this particular information for a very lengthy time.
ReplyDeleteThank yyou and good luck.
website design pakistan
responsive web design
website design services Pakistan
responsive web design services in Karachi
UI UX website design Pakistan
wireframe design in Karachi
Best website Design services in Pakistan
Pakistan Best web design service
This really is both equally a very good information when i rather definitely preferred verifying. This may not be at all times i always get likely to see a challenge. Software House
ReplyDeleteFor a lot of occasions I’ve recently been searching for dependable as well as distinctive web page and this is definitely the best website exactly where I possibly could discover that. I appreciate the method you write your posts, incredibly skilled. I really could notice that you spent enough time and energy in composing your site as well as in discussing more information.group calendar
ReplyDelete. I’ll take a note of your site as well as recommend it to my buddies.
Well Written. Keep sharing more and more web development company in hyderabad
ReplyDeleteweb designers in hyderabad
Thank you for sharing wonderful information with us to get some idea about it.
ReplyDeleteOracle OSB Training
OSB Online Training Hyderabad
osb certification training
soa training
oracle soa 12c training
tableau online training
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free seo
ReplyDeleteThank you for sharing wonderful information with us to get some idea about it.
ReplyDeleteOracle OSB Training
soa Online Training Hyderabad
tableau certification training
Thanks for sharing this information with us and it was a nice blog.Envizon Studio is a leading
ReplyDeleteBest web design company in Hyderabad offering all kinds of custom built websites, web portals & web applications. Please visit our website for more Information.
Nice shearing, I have read your blog and gain lots of information. You have posted very useful tips for blogging and internet marketing. Anyways thanks for the tips.
ReplyDeletewhite label website builder
website builder for reseller
digital wallet cryptocurrency
ReplyDeletedecentralized virtual currency
safest crypto wallet
trust wallet crypto
russian digital currency
ios digital wallet
ios digital wallet
multi crypto wallet
secured with end to end encryption